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ツールとして使うのが厳しいこともあるっていうのを学びましたとさ。
おしまい!
調べる対象について、浅かったり広かったり振れ幅大きい記事を中心に。 何かしら調べてほしい、聞きたいなどの依頼は気が向けばやるかもしれないです。