html2canvas 【JavaScript】HTML要素を画像に変換＆ダウンロードさせる方法

https://keymaso.com/programemory/javascript/html-to-image/

上記を元に作成すると、画像のダウンロードが出来なかったのですが、サーバにアップしたら出来ました。

```
<!DOCTYPE html>
<html lang="ja">
<head>
<title>テスト</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(); //自動クリック
}
}

const showMessage = () => {
const textbox = document.getElementById("input-message");
const inputValue = textbox.value;

//テキストボックスの値を使って、出力するメッセージを生成する
const output = "入力された内容は「" + inputValue + "」です。";
//出力用のp要素にメッセージを表示
document.getElementById("output-message").innerHTML = output;
}

</script>
</head>
<body>

<form id="form1" action="#">
<input type="text" id="input-message">
<input type="button" onclick="showMessage()" value="送信">
</form>

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

```