HTML5のCanvasに書いた画像をファイルに保存する

過去の投稿「HTML5のCanvas、JavaScriptでフラクタルの木を描画する」をもとにHTML5のCanvasに書いた画像をファイルに保存するプログラムを作ってみます。

toDataURL()メソッドを使います。
キャンパスに描画されている現在の内容をPNGやJPGのデータURIで取得するメソッドです。

ボタン「画像をダウンロード」をクリックするとキャンバスの画像をtoDataURL()メソッドでデータを取得して、
PNGファイルに変換するPHPスクリプトにデータを送信して、PNGファイルを受け取ります。
あらかじめデータを送信するフォームも作成しておきます。

データ送信用フォーム(HTML)

PNGファイル変換スクリプト(PHP)

PNGイメージデータとファイル名を受け取って、PNGファイルを返します。

フォーム送信(JavaScript)

キャンバスのデータをPNGデータに変換して、hiddenフィールドに格納して、フォームをPOSTします。

デモ:
下の黒枠内をパソコンでクリックもしくは、スマホ・タブレット端末でタッチすると、その場所にフラクタルの木が描画されます。
「画像をダウンロード」をクリックすると、キャンバスに描画した画像がPNGファイルでダウンロードできます。
(端末が描画に対応していない場合があります。)



PAGE TOP