見出し画像

HTML5 Canvas 'toDataURL'がうまく動かない

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

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

1.試したコード

<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');   

/** 以下略

2.結果

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ツールとして使うのが厳しいこともあるっていうのを学びましたとさ。
おしまい!

調べる対象について、浅かったり広かったり振れ幅大きい記事を中心に。 何かしら調べてほしい、聞きたいなどの依頼は気が向けばやるかもしれないです。