web-dev-qa-db-ja.com

JavaScriptでキャンバスを画像に変換する

JavaScriptでキャンバスを画像に変換したいのですが、canvas.toDataURL("image/png");を実行しようとすると、エラーが発生しますSecurityError: The operation is insecure。この問題の解決を手伝ってください。

前もって感謝します。

javascriptjquerycanvashtml5-canvas
11
mmpatel009

あなたは正しい考えを持っています、そしてそれは次のような非常に単純なケースで機能します：

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

ctx.fillRect(50,50,50,50);

var img = new Image();
img.src = can.toDataURL();
document.body.appendChild(img);

http://jsfiddle.net/simonsarris/vgmFN/

しかし、キャンバスを「汚した」場合、問題が発生します。これは、異なるOriginからの画像をキャンバスに描画することによって行われます。たとえば、キャンバスがwww.example.comでホストされていて、www.wikipedia.orgの画像を使用している場合、キャンバスのOrigin-cleanフラグは内部でfalseに設定されます。

Origin-cleanフラグがfalseに設定されると、toDataURLまたはgetImageDataを呼び出すことができなくなります。

技術的には、ドメイン、プロトコル、ポートが一致する場合、イメージは同じオリジンです。

ローカルで作業している場合（file：//）、描画された画像はフラグをオフに設定します。これはデバッグを面倒にしますが、Chromeを使用すると、フラグ--allow-file-access-from-filesこれを許可します。

12
Simon Sarris