HTML5キャンバスのクロスオリジンデータ

Question

jsで画像を読み込んでキャンバスに描画しています。描画した後、私はキャンバスから画像データを取得する：

var img = new Image(); 
img.onload = function() { 
    canvas.drawImage(img, 0, 0); 
    originalImageData = canvas.getImageData(0,0,width, height)); //chrome fails 
} 
img.src = 'picture.jpeg'; 

これはSafariとFirefoxで両方完璧に動作しますが、次のメッセージとChromeで失敗します。

ためのキャンバスから画像データを取得することができません

キャンバスはクロスオリジンのデータによって汚染されています。

javascriptファイルと画像は同じディレクトリにありますので、私はchormeの動作を理解していません。原点は、ドメインとプロトコルによって決定される

Access-Control-Allow-Origin: * 

（例えば、HTTPおよびHTTPSが同じでない）ウェブページの：あなたの画像に対してCORS（Cross-Origin Resource Sharing）を有効に

Answer 1

は、画像応答にHTTPヘッダーを渡しますスクリプトの場所ではありません。

file：//を使用してローカルで実行している場合は、通常、これは常にクロスドメインの問題とみなされます。これはファイルでクロスドメインの問題を解決するために

Answer 2

var img = new Image(); 
img.onload = function() { 
    canvas.drawImage(img, 0, 0); 
    originalImageData = canvas.getImageData(0,0,width, height)); //chrome will not fail 
} 
img.crossOrigin = 'http://profile.ak.fbcdn.net/crossdomain.xml';//crossdomain xml file, this is facebook example 
img.src = 'picture.jpeg'; 

を経由して行くには、その優れた：//、あなたはパラメータ

--allow-file-access-from-files 

Answer 3

に役立ちますので、希望

http://localhost/ 

Answer 4

var canvas = document.createElement("canvas"); 
var ctx = canvas.getContext("2d"); 
var img = new Image(); 
img.crossOrigin = "anonymous"; 
img.onload = function() { 
    canvas.width = img.width; 
    canvas.height = img.height; 
    ctx.drawImage(img, 0, 0); 
    originalImageData = ctx.canvas.toDataURL(); 
} 
img.src = 'picture.jpeg'; 

でChromeを起動することができます

これが役立つことを願っています。

Answer 5

サーバーの応答ヘッダーにAccess-Control-Allow-Origin: *が含まれている場合は、クライアント側から修正できます。画像またはビデオに属性を追加します。

<img src="..." crossorigin="Anonymous" /> 
 
<video src="..." crossorigin="Anonymous"></video>

そうしないと、サーバ側プロキシを使用する必要があります。