DOMをJsで生成してそれを画像として保存したいのですが、HTML2Canvasを使ったところ一旦画面にCanvas、img要素に出力してから保存させる方法だったのですが、自分がやりたいのはDOM状態のまま保存ボタン１つで画面描画に変化を起こさずにダウンロードしたいのですが、いい方法ありますか？
プラグインなどでもいいのでよろしくお願いします。

参考サイト

https://hinanaoblog.xyz/?p=434

<!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>

ボツ理由
わざわざCanvas要素などに再描画させて保存させなかったのでこれが使えると思ったのですが、保存画像がDOM内で指定したサイズの２倍で保存されてしまう。
サイズ指定して保存すると画像が何も写ってないものが保存される。

行動規範の内容に同意します

回答2件

私の知る限りではDOMで描画されたWebページをウインドウ丸ごとスクリーンショットをとるWeb標準APIは存在しません。
html2canvasは内部に独自のレンダリングエンジンを実装していて、ブラウザのレンダリングをエミュレートする事で画像ファイル化を実装できますが、当然、ブラウザのレンダリングとは異なります。
ブラウザのレンダリングと全く同じスクリーンショットが欲しい場合は、FireShot等の拡張機能を使用して下さい。

Re: tokuwgawa さん

投稿2019/02/04 12:20