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

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

必要なファイル

html2canvas http://html2canvas.hertzen.com/
指定した要素の中身をcanvasへ変換してくれる
polyfill.min.js https://cdn.polyfill.io/v2/polyfill.min.js
これがないとIEでhtml2canvasが動かない

サンプルサイト

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

簡単な処理内容

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

ソースコード

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

<!DOCTYPE html>
<html lang="ja">
<head>
<title>html2canvasテスト</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="html2canvas.min.js"></script>
<script type="text/javascript">
	function getDisplayImage(){
		//html2canvas実行
		html2canvas(document.getElementById("target")).then(function(canvas) {
			downloadImage(canvas.toDataURL());
		});
	}

	function downloadImage (data) {
		var fname ="testimage.png";
		var encdata= atob(data.replace(/^.*,/, ''));
		var outdata = new Uint8Array(encdata.length);
		for (var i = 0; i < encdata.length; i++) {
			outdata[i] = encdata.charCodeAt(i);
		}
		var blob = new Blob([outdata], ["image/png"]);
		
		if (window.navigator.msSaveBlob) {
			//IE用
			window.navigator.msSaveOrOpenBlob(blob, fname);
		} else {
			//それ以外？
			document.getElementById("getImage").href=data;			//base64そのまま設定
			document.getElementById("getImage").download=fname;		//ダウンロードファイル名設定
			document.getElementById("getImage").click(); 			//自動クリック
		}
	}

	</script>
</head>
	<body>
		<div>
			<input id="downloadImageButton" style="width:120px;" type="button" value="画像保存" onclick="getDisplayImage();" >
			<a id="getImage" href=""  style="display:none;"  download="image.png">画像保存</a>
		</div>
		<hr>

		 <div id="target" style="width:500px;height:500px">
				<img id="work" src="test.png"/>
			<div style="position:absolute;z-index:10;font-size:28px;top:150px;left:250px;background-color:#FFFFFF;">仕事中</div>
		</div>
	</body>
</html>

<!DOCTYPE html>

<head>

<title>html2canvasテスト</title>

function getDisplayImage(){

//html2canvas実行

html2canvas(document.getElementById("target")).then(function(canvas) {

downloadImage(canvas.toDataURL());

});

}

function downloadImage (data) {

var fname ="testimage.png";

var encdata= atob(data.replace(/^.*,/, ''));

var outdata = new Uint8Array(encdata.length);

for (var i = 0; i < encdata.length; i++) {

outdata[i] = encdata.charCodeAt(i);

}

var blob = new Blob([outdata], ["image/png"]);

if (window.navigator.msSaveBlob) {

//IE用

window.navigator.msSaveOrOpenBlob(blob, fname);

} else {

//それ以外？

document.getElementById("getImage").href=data; //base64そのまま設定

document.getElementById("getImage").download=fname; //ダウンロードファイル名設定

document.getElementById("getImage").click(); //自動クリック

}

</script>

</head>

<body>

<div>

</div>

<hr>

</div>

</body>

</html>

動作確認環境

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

履歴

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

関連

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

名前:プロ投稿日：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タグが１つ多い状態となっておりました。
ソースコードとサンプルページの内容を修正致しました。
今後はこのようなことがないように気をつけます。
ご指摘有難うございました。

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

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

名前:プロ投稿日：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タグが１つ多い状態となっておりました。
  ソースコードとサンプルページの内容を修正致しました。
  今後はこのようなことがないように気をつけます。
  ご指摘有難うございました。
名前:プロ投稿日：2018/12/20(木) 10:03:41 ID：992714f3a 返信
コードいろいろとおかしいですよ。