web-dev-qa-db-ja.com

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

Jsで画像を読み込んで、キャンバスに描画します。描画後、キャンバスからimageDataを取得します。

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の動作がわかりません。

javascripthtml5google-chromecanvascross-domain
29
Samuel Müller

画像に対してCORS（ Cross-Origin Resource Sharing ）を有効にするには、画像応答とともにHTTPヘッダーを渡します。

Access-Control-Allow-Origin: *

Originは、スクリプトの場所ではなく、ウェブページのドメインとプロトコル（たとえば、httpとhttpsは同じではない）によって決定されます。

File：//を使用してローカルで実行している場合、これは一般に常にクロスドメインの問題と見なされます。経由する方が良い

http://localhost/
24
Ben Adams

File：//のクロスドメインの問題を解決するには、パラメーターでchrome

--allow-file-access-from-files
10
Markus Madeja
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';

お役に立てれば

7
Gustavo Eduardo Bonilla Montoy
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';

お役に立てれば。

3
code.rider

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

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

それ以外の場合は、サーバー側プロキシを使用する必要があります。

0
Jeff Tian