2017年11月4日TwitterFacebookGoogle+B!HatenaPocket過去の投稿「HTML5のCanvas、JavaScriptでフラクタルの木を描画する」をもとにHTML5のCanvasに書いた画像をファイルに保存するプログラムを作ってみます。toDataURL()メソッドを使います。キャンパスに描画されている現在の内容をPNGやJPGのデータURIで取得するメソッドです。ボタン「画像をダウンロード」をクリックするとキャンバスの画像をtoDataURL()メソッドでデータを取得して、PNGファイルに変換するPHPスクリプトにデータを送信して、PNGファイルを受け取ります。データを送信するフォームも作成しておきます。value="fractal.png"></form>PNGファイル変換スクリプト(PHP)PNGイメージデータとファイル名を受け取って、PNGファイルを返します。'"');imagepng($image);imagedestroy($image);フォーム送信(JavaScript)キャンバスのデータをPNGデータに変換して、hiddenフィールドに格納して、フォームをPOSTします。image_data;form.submit();デモ:下の黒枠内をパソコンでクリックもしくは、スマホ・タブレット端末でタッチすると、その場所にフラクタルの木が描画されます。「画像をダウンロード」をクリックすると、キャンバスに描画した画像がPNGファイルでダウンロードできます。(端末が描画に対応していない場合があります。HTML5スポンサーリンクよろしければシェアお願いしますTwitterFacebook0Google+0B!Hatena1Pocket0JQueryスライドショーライブラリbxSliderの実装(レスポンシブ対応)NextHTML5のCanvas、JavaScriptでフラクタルの木を描画するPrev関連記事プログラミング言語別標準入出力まず、空白区切りの整数2つを標準入力として受け取り、変数に格納します。...N進数変換ツールを作成しましたN進数変換ツールを作成しました。以下リンクになります。Reserved.当サイト内の文章・画像等の内容の無断転載及び複製等はご遠慮ください。