web-dev-qa-db-ja.com

クロスオリジンデータによって汚染されたキャンバス

信頼できるサードパーティのサイトからモーション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できるかについてのアイデアはありますか？ありがとう！

javascriptcanvascross-domaincorsmjpeg
16
clwen

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

しかし、いいえ、CORSをサポートしない外部ソースからのgetImageData（）を使用することはできません。

11
Paul Kaplan

質問は非常に古くからありますが、問題は残っており、それを解決するWebはほとんどありません。私は共有したい解決策を思いつきました：

最初にcrossorigin属性を設定せずに画像（またはビデオ）を使用し、AJAXを介して同じリソースに対して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では、httpファイルにアクセスしようとした場合にのみ問題が発生する可能性がありますhttpsスクリプト。その回避策はまだわかりません。

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リクエストでのみ必要です。私が知る限り、ほとんどのブラウザでは使用されていません

10
Jörn Berkefeld

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

6
Kristopher Ives

Canvasで画像のbase64を使用できます。base64に変換するときに、クロスオリジンを回避するために画像パスの前にプロキシURL（ https://cors-anywhere.herokuapp.com/ ）を使用できます問題

ここで詳細を確認してください

https://stackoverflow.com/a/44199382/5172571

var getDataUri = function (targetUrl, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
        var reader = new FileReader();
        reader.onloadend = function () {
            callback(reader.result);
        };
        reader.readAsDataURL(xhr.response);
    };
    var proxyUrl = 'https://cors-anywhere.herokuapp.com/';
    xhr.open('GET', proxyUrl + targetUrl);
    xhr.responseType = 'blob';
    xhr.send();
};
getDataUri(path, function (base64) {
    // base64 availlable here
})
3
Manish Mittal