canvasで描いた絵をPHPでサーバー上に保存する方法

canvasを画像データとして取得したい場合は、canvasのDOMオブジェクトにtoDataURLメソッドを使えば簡単に取得できる。
先日紹介した画像保存機能のついてないお絵描きツール、Canvas Painterを開いて適当に絵を描き、F12キーで開発者ツールを開いてコンソール画面で『window.open(document.querySelector(‘canvas’).toDataURL())』とすると描いた画像データが表示されるので、右クリックで保存できる。ちなみに、標準ではPNG画像だけれども、toDataURLの引数を”image/jpeg”とすると、JPEG画像が取得できる(ただし、透過部分は真っ黒になるよう)。

ただ、上記で作成された画像データはBase64のデータ。これをどうやったらPHPを用いて画像ファイルとしてサーバー上に保存できるかが分からなかったので調べてみると、下記サイトに書いてありました。
canvas.toDataURLメソッドを使う | iconDecotter-Log
ただ、base64_decodeという関数でbase64のデータをデコードして、imagecreatefromstringという関数で画像リソース化して、imagepngという関数で画像ファイルとして保存できるよう。PHPはいろんな関数があるなぁ。まだまだ分からないことばかりなのでもっと勉強したほうがよさそう。

ただ、上記をそのままコピペすると、うまくいかなかったので下記のように変更しました。

<?php
//canvasデータがPOSTで送信されてきた場合
$canvas = $_POST["acceptImage"];
 
//ヘッダに「data:image/png;base64,」が付いているので、それは外す
$canvas = preg_replace("/data:[^,]+,/i","",$canvas);
 
//残りのデータはbase64エンコードされているので、デコードする
$canvas = base64_decode($canvas);
 
//まだ文字列の状態なので、画像リソース化
$image = imagecreatefromstring($canvas);
 
//画像として保存（ディレクトリは任意）
imagesavealpha($image, TRUE); // 透明色の有効
imagepng($image ,'./test.png');
?>

19行目で透明色を有効にしています。これがないと背景が真っ黒の画像になりました。後、自分の環境ではimagepng関数の第二引数がダブルクォーテーションだとなぜかうまくいかなかったのでシングルクォーテーションに変更。
以下、動作サンプル
canvasを使ったお絵描き投稿システム
お絵描き部分については、ほぼドットインストールの『Canvasでお絵かきアプリ』の6回目までと同じです。
Canvasでお絵かきアプリ (全8回) – プログラミングならドットインストール
今後、お絵かき掲示板を作るとしたら、これを基本にどんどん拡張していこうと思う。