https://blog.katsubemakito.net/html5/canvas-sendserver

Canvasに描画した内容を画像としてサーバへ送信し、そのままサーバに保存してみます。

今回は入力したテキストがそのままCanvasに描画される簡単なサンプルを用意しました。文字色と背景色もおまけで変更できます。もう少し頑張るとバナー画像ジェネレーターとか作れそうですね。

サーバ側のプログラムはPHPを採用していますが、他の言語でも似たような処理になります。

Canvasの内容をサーバへ送信する

実行例

以下から実際のサンプルをお試しいただけます。 miku3.net

左側にあるテキストボックスへ入力するとその場でCanvasに反映されます。同様に文字色や背景色も指定したタイミングでCanvasが書き換わります。ブラウザによって挙動が変わると思いますがカラーピッカーをグリグリいじる度にCanvasが変わっていく様子を見ていると中々楽しいですねｗ

入力が終わったら「サーバへ保存」ボタンを押すとCanvasの内容がサーバ上へ送信されます。正常に保存されると右側に表示されます。

アイコンはFontAwesomeからお借りしています。
保存された画像は定期的に削除されます
保存された画像は誰でも閲覧可能です。また裁判所などを通して開示請求があった場合はIPアドレスの開示などを行いますので悪いことには利用しないでくださいね。

ソース

JavaScriptがちょっと長くなってしまったので、HTMLと分離しています。またCSSも別ファイルにしました。

HTML

HTML5より



今回はこの文字列をそのままサーバへ送りつけ、サーバ上でバイナリに戻しています。

サーバへ送信する


軽いデータならGETで送っても良いのですが、ここではPOSTを利用しています。中身を見ればわかりますがFetchAPIで普通に送っているだけですね。

// Canvasを画像として取り出す
const image = document.querySelector("#board").toDataURL("image/png");

// Fetch APIのパラメーターをセット
const param = {
  method: "POST",
  headers: {
    "Content-Type": "application/json; charset=utf-8"
  },
  body: JSON.stringify({data: image})  // 画像をセット
};

// サーバへ送信
fetch("http://example.com/receive.php", param)
  .then((response)=>{
    return response.json();  // サーバからはJSONが返される想定
  })
  .then((json)=>{
    // 成功時の処理
  })
  .catch((error)=>{
    // エラー時の処理
  });
}



FetchAPIの基本的な使い方は以下を参照ください。
blog.katsubemakito.net

サーバでバイナリとして保存する


ロジックはシンプルで先頭にある情報を削除し実データのみの状態にした上で、Base64をデコードする関数に突っ込んでいます。あとはファイルに保存するなりDBなどに突っ込むなり、ImageMagickなどで画像加工するなど思いのままです。

// JSから送られたデータ
$data = 'data:image/png;base64,(Base64でエンコードされたデータ)';

// Base64をバイナリにデコードする
$data = str_replace('data:image/png;base64,', '', $data);  // 冒頭の部分を削除
$data = str_replace(' ', '+', $data);  // 空白を'+'に変換
$image = base64_decode($data);

// ファイルへ保存
$file = sprintf('%s.png', uniqid());    //ファイル名を作成
file_put_contents($file, $image);



ここではPHPで書いていますが、他言語でも似たような処理になるかと思います。Base64のエンコード/デコードするライブラリなどは大抵の言語で用意されています。

参考ページ





HTMLCanvasElement.toDataURL() - MDN
Data URI scheme - Wikipedia