ボタンクリック時にhtml2canvasで保存した画像をダウンロードさせる方法

ボタンクリック時にhtml2canvasで保存した画像をダウンロードさせる方法

仕事でjavascriptを利用して、表とかグラフを作っています。簡単にグラフを保存させたいと要望があったので、html2canvasとblobを使ってダウンロードさせる処理を作成しました。

必要なファイル

サンプルサイト

http://hinanaoblog.xyz/hinanao/html/html2canvas/test.html

簡単な処理内容

  1. 画像保存ボタンをクリックしたときに処理開始する。
  2. divタグのidがtarget内の表示内容をcanvasへ変換する。
  3. canvasをbase64へ変換する。
  4. IEの時blob形式へ変換し、ダウンロード処理を開始する。
    それ以外(検証したのはFireFoxとchrome)base64をhrefへ設定し、リンクを自動的にクリックさせる。

ソースコード

  • 以下のソースコードを動作させるには、同じフォルダ内にダウンロードしたhtml2canvas.min.jsとサンプル用画像をtest.pngという名前で保存してください。

動作確認環境

Internet Explorer 11.0.60(64ビット)
FireFox 60.0.2(64ビット)
Google Chrome 67.0.3396.87(64ビット)

履歴

  • 2018/12/23 ソースコードを動作させる条件を追記しました。ソースコード内のdivタグが1つ余分に記述しておりました。コメントでのご指摘ありがとうございました。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク

『ボタンクリック時にhtml2canvasで保存した画像をダウンロードさせる方法』へのコメント

  1. 名前:プロ 投稿日:2018/12/19(水) 19:09:37 ID:f931e80d8 返信

    divの数がおかしいです。
    このまま実行したら「Uncaught (in promise) ReferenceError: downloadImage is not defined」と出ます。

    • 名前:hinanao 投稿日:2018/12/23(日) 08:25:28 ID:844f3cb1f 返信

      プロ様
      ご指摘の通りソースコード内のdivタグが1つ多い状態となっておりました。
      ソースコードとサンプルページの内容を修正致しました。
      今後はこのようなことがないように気をつけます。
      ご指摘有難うございました。

  2. 名前:プロ 投稿日:2018/12/20(木) 10:03:41 ID:992714f3a 返信

    コードいろいろとおかしいですよ。

%d人のブロガーが「いいね」をつけました。