ボタンクリック時に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へ設定し、リンクを自動的にクリックさせる。

ソースコード

動作確認環境

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

スポンサーリンク

シェアする

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

フォローする

スポンサーリンク
%d人のブロガーが「いいね」をつけました。