最近、Flashが2020年に廃止ってことを受けて、いまさらながら、HTML５のCanvasを色々いじってみてたり。

まずは、画像を加工する、ありがちなウンタラ画像作成コンテンツを作ってみるべく、試行錯誤していたところ、Canvasの画像を画像形式（PNG,JPEGなど）ダウンロードできるようにしたいなーと思い、toDataURLを試してみたところ、なんだかエラーが出てうまく動かなかった

１．試したコード

＜HTML>
<canvas id="sourceCanvas" width="100" height="100"></canvas>
<button id="download" onclick="download();">ダウンロード</button>

＜JavaScript>
//sourceCanvasをPNGに変換して画像保存する
function download() {
	let srcCanvas = document.getElementById('sourceCanvas');
	let link = document.getElementById('canvas_dl');
	link.href = srcCanvas.toDataURL('image/png');   

/** 以下略

２．結果

hoge.html:363 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
   at download (file:///C:/***/hoge.html:363:27)
   at HTMLButtonElement.onclick (file:///C:/***/hoge.html:185:49)

エラー！なんぞ！？
と思って、調べたところ、原因はローカル端末でのテスト（※画像もローカルのものをcanvasに描画するといったツクリ）であったための模様。
上のエラーでいうfile:///C:/***～が、別ドメイン扱い？となってしまうみたい。

＜参考＞
For security reasons, your local drive is declared to be "other-domain" and will taint the canvas.
(That's because your most sensitive info is likely on your local drive!).
https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported

つまり、ローカルじゃなきゃいいんだな？ってことなので、設置予定のサーバにHTMLファイルをアップロードして実行。

できたぁ！
というわけで、サーバに置かないとダメっていうのもあるので、ローカル向けのHTMLツールとして使うのが厳しいこともあるっていうのを学びましたとさ。
おしまい！