21

信頼できるサードパーティのサイトからモーションjpegを読み込んでいます。私はしようとしてgetImageData()いますが、ブラウザ（Chrome 23.0）は次のように文句を言います：

Unable to get image data from canvas because the canvas has been tainted by
cross-origin data.

SOについても同様の質問がいくつかありますが、それらはローカルファイルを使用しており、私はサードパーティのメディアを使用しています。スクリプトは共有サーバーで実行され、リモートサーバーを所有していません。

img.crossOrigin = 'Anonymous'またはimg.crossOrigin = ''（CORSに関するChromiumブログのこの投稿を参照）を試しましたが、役に立ちませんでした。getImageDataクロスオリジンデータを使用してキャンバス上でどのように使用できるかについてのアイデアはありますか？ありがとう！

4

4 に答える 4

13

一度汚染された crossOrigin フラグをリセットすることはできませんが、画像が何であるかを事前に知っている場合は、それをデータ URL に変換できます 。データ URL からキャンバスへの画像の描画を参照してください。

CORS をサポートしていない外部ソースから getImageData() を使用することはできません。

于 2012-12-02T23:34:19.833 に答える
11

質問は非常に古いものですが、問題は残っており、Web 上で解決できるものはほとんどありません。共有したい解決策を思いつきました：

最初に属性を設定せずに画像 (またはビデオ) を使用し、crossoriginAJAX を介して同じリソースへの HEAD リクエストを取得できるかどうかをテストできます。それが失敗した場合、リソースは使用できません。成功した場合は、属性を追加し、リロードするタイムスタンプを付けて画像/ビデオのソースを再設定できます。

この回避策により、リソースをユーザーに表示し、CORS がサポートされていない場合に一部の機能を非表示にすることができます。

HTML:

<img id="testImage" src="path/to/image.png?_t=1234">

JavaScript:

var target = $("#testImage")[0];
    currentSrcUrl = target.src.split("_t=").join("_t=1"); // add a leading 1 to the ts
$.ajax({
    url: currentSrcUrl,
    type:'HEAD',
    withCredentials: true
})
.done(function() {
    // things worked out, we can add the CORS attribute and reset the source
    target.crossOrigin = "anonymous";
    target.src = currentSrcUrl;
    console.warn("Download enabled - CORS Headers present or not required");
    /* show make-image-out-of-canvas-functions here */
})
.fail(function() {
    console.warn("Download disabled - CORS Headers missing");
    /* ... or hide make-image-out-of-canvas-functions here */
});

IE10+11 および現在の Chrome 31、FF25、Safari 6 (デスクトップ) でテストおよび動作しています。IE10 および FF では、https スクリプトから http ファイルにアクセスしようとした場合にのみ、問題が発生する可能性があります。私はまだその回避策について知りません。

2014 年 1 月の更新:

これに必要な CORS ヘッダーは次のようになります (Apache 構成構文)。

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "referer, range, accept-encoding, x-requested-with"

x-header は ajax リクエストにのみ必要です。私が知る限り、ほとんどのブラウザで使用されているわけではありません

于 2013-12-13T08:37:14.937 に答える
6

index.htmlまた、リソースが作業中のファイルと同じディレクトリにあるかどうかに関係なく、ローカルで作業している場合は CORS が適用されることにも注意してください。私にとってこれは、サーバーにドメインがあるため、サーバーにアップロードしたときに CORS の問題が解消されたことを意味します。

于 2013-03-29T18:49:39.133 に答える