canvas.toDataURL（）およびdrawImage（）のセキュリティエラー

<!doctype html> 
<canvas id="canvas" height="200" width="200"></canvas> 
<div id="new"></div> 
<script> 
var div = document.getElementById("new"); 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var img = new Image(); 

img.src = 'http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png'; 
//img.src = 'local.png'; 

img.onload = function(){ 
    //draws the image on the canvas (works) 
    ctx.drawImage(img,0,0,200,200); 

    //creates an image from the canvas (works only for local.png) 
    var sourceStr = canvas.toDataURL(); 

    //creates the img-tag and adds it to the div-container 
    var newImage = document.createElement("img"); 
    newImage.src = sourceStr; 
    div.appendChild(newImage); 
} 
</script>

このスクリプトは、html5-logoでキャンバスを作成します。このキャンバスから、 "toDataURL（）"メソッドを使用してイメージを作成します。ここで私はセキュリティエラーが発生します。canvas.toDataURL（）およびdrawImage（）のセキュリティエラー

Firefoxは言う - エラー：キャッチされない例外：[例外... "セキュリティエラー" コード： "1000" nsresult： "0x805303e8（NS_ERROR_DOM_SECURITY_ERR）"

クロムは言う - 不明なエラー：SECURITY_ERR：DOM例外18

サーバー上のイメージでスクリプトを使用すると正常に動作します。だから今回は本当に機能でありバグではないと思う。誰かがイメージフォームと他のサーバーの外にキャンバスを使ってイメージを作成する方法を知っていますか？ BTW：Webサーバーなしでサイトをローカルファイルとして実行するとエラーが発生します。

出典

2012-02-18 martin

答えはまだ見つかりましたか？私は同じ問題を抱えています。同じサーバーの画像でさえも起こります。画像がキャンバスに描画されると、キャンバス全体がアクセス不能になります。 – Kokodoko

私は、このエラーが同じ発信元ポリシーの拡張であると考えています。基本的に、別のサーバーからリソースを操作することはできません。安全ではありませんが、外部リソースを取得する方法をサーバーに組み込むことができます：myserver.com/?external=url/path/to/img ...理論的にはうまくいくでしょう。

出典

2012-02-18 22:09:38 Ryan

これはセキュリティ機能であり、バグではありません。

イメージを読むと（例えばtoDataURLまたはgetImageData）、あなたの訪問者の文脈からhttps://mail.google.com/mail/を読むことができます。

したがってキャンバス要素は、外部画像がキャンバスに書き込まれるときに設定されるorigin-cleanフラグを持ちます。その場合、あなたはもはやそれから読むことができません。

このトピックの詳細については、hereを参照してください。

出典

2012-02-18 22:16:19 copy

リンクが壊れていますが、ここで情報が見つかると思います（http://www.w3.org/TR/html5/embedded-content-0.html#security-with-canvas-elements）。 –

-1

これは機能です。イメージは別のサーバー上にあるため。この

Why does canvas.toDataURL() throw a security exception?

を確認してくださいあなたはこれらの例外をキャッチすることができます。しかし、これは他のブラウザのためにする頭痛であり、また安全のためには適切ではありません。

それでは、より良い解決策はlocal.Andにそのイメージをダウンロードすることです。

出典

2012-02-20 18:56:45

CORSの問題のようです。レスポンスに「Access-Control-Allow-Origin：*」ヘッダーを含めるようにビデオを取得でき、video.crossorigin = "Anonymous"を設定できる場合は、おそらくこれを取り除くことができます。

チャールズ・ウェブ・プロキシを使用して、作業したい画像またはビデオにヘッダーを追加しました。

ここで画像を扱うフィドルだhttps://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

を参照してください：http://jsfiddle.net/mcepc44p/2/

var canvas = document.getElementById("canvas").getContext("2d"); 

var button = document.getElementById("button"); 

var image = new Image(); 
image.crossOrigin = "anonymous"; // This enables CORS 
image.onload = function (event) { 
    try { 
     canvas.drawImage(image, 0, 0, 200, 200); 
     button.download = "cat.png"; 
     button.href = canvas.canvas.toDataURL();   
    } catch (e) { 
     alert(e); 
    } 
}; 
image.src = "https://i.chzbgr.com/maxW500/1691290368/h07F7F378/"

は、それはあなたの問題を解決を願っています。

出典

2016-05-01 14:24:59

canvas.toDataURL（）およびdrawImage（）のセキュリティエラー

答えて

関連する問題