JavaScriptでPOSTしたBase64エンコードの画像データをPHPで受け取る
JavaScriptで生成したチャート等のイメージデータをサーバー内に自動保存する仕組みを作っている途中で無駄にハマったポイントがあったのでシェアします。
$data = $_POST["image"];
$image = base64_decode($data);これだとうまくデコードできません。。
調べていくと、Base64エンコードしたデータをPOSTすると”＋” プラスが ” ” 半角スペースに置換されてしまう事があるようです。
$data = $_POST["image"];
$data = str_replace(' ' , '+' , $data);
$image = base64_decode($data);半角スペースをプラスに置換したけど、うまくデコードできません。
$data変数の文字列を確認すると。。
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABCAAAA…(省略)
PHPのbase64_decodeには不要な文字列が入ってしまっています。JavaScriptでBase64エンコードすると環境によってこの文字列が入ってしまうようです。
という事でこちらのコードが完成形です。
$data = $_POST["image"];
$data = str_replace(' ' , '+' , $data);
$data = preg_replace('#^data:image/\w+;base64,#i' , '' , $data);
$image = base64_decode($data);もしPHPのbase64_decodeに不要な文字列が入っていた場合には除去します。 このコードでデコートした画像データは壊れずにきちんと表示できました。ちなみにこの文字列はインラインイメージとしてブラウザに画像表示する時に必要となります！
たったこれだけの事ですが、 base64の仕様を詳しく知らなかったのでハマリました。。
