getImageData（）エラーを修正する方法キャンバスはクロスオリジンデータによって汚染されていますか？

私のコードは私のローカルホストでうまく機能していますが、サイトでは機能していません。

コンソールからこのエラーを受け取りました、この行.getImageData(x,y,1,1).data：

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 

私のコードの一部：

jQuery.Event.prototype.rgb=function(){
        var x =  this.offsetX || (this.pageX - $(this.target).offset().left),y =  this.offsetY || (this.pageY - $(this.target).offset().top);
        if (this.target.nodeName!=="CANVAS")return null;
        return this.target.getContext('2d').getImageData(x,y,1,1).data;
    }

注：画像のURL（src）はサブドメインのURLからのものです

他の人が言ったように、あなたはクロスオリジンドメインからロードすることによってキャンバスを「汚染」しています。

https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

ただし、次のように設定するだけでこれを防ぐことができる場合があります。

img.crossOrigin = "Anonymous";

これは、リモートサーバーが次のヘッダーを適切に設定した場合にのみ機能します。

Access-Control-Allow-Origin "*"

「直接リンク」オプションを使用する場合のDropboxファイルチューザーは、この良い例です。私は、oddprints.comでそれを使用して、リモートのドロップボックスの画像のURLからキャンバスに画像を移動し、画像データをサーバーに送信します。すべてJavaScriptで

ヘッダーが.setAttribute('crossOrigin', '')ない304応答を回避するために、URLのクエリ文字列にタイムスタンプを追加する必要があることに気付きましたAccess-Control-Allow-Origin。

これは私に与えます

var url = 'http://lorempixel.com/g/400/200/';
var imgObj = new Image();
imgObj.src = url + '?' + new Date().getTime();
imgObj.setAttribute('crossOrigin', '');

別のサーバーからキャンバスに直接画像を描画して、を使用することはできませんgetImageData。これはセキュリティの問題であり、キャンバスは「汚染されている」と見なされます。

PHPを使用してイメージのコピーをサーバーに保存し、新しいイメージをロードするだけでうまくいきますか？たとえば、URLをPHPスクリプトに送信してサーバーに保存し、次のように新しいファイル名をJavaScriptに返すことができます。

<?php //The name of this file in this example is imgdata.php

  $url=$_GET['url'];

  // prevent hackers from uploading PHP scripts and pwning your system
  if(!@is_array(getimagesize($url))){
    echo "path/to/placeholderImage.png";
    exit("wrong file type.");
  }

  $img = file_get_contents($url);

  $fn = substr(strrchr($url, "/"), 1);
  file_put_contents($fn,$img);
  echo $fn;

?>

次のようなajax javascriptでPHPスクリプトを使用します。

xi=new XMLHttpRequest();
xi.open("GET","imgdata.php?url="+yourImageURL,true);
xi.send();

xi.onreadystatechange=function() {
  if(xi.readyState==4 && xi.status==200) {
    img=new Image;
    img.onload=function(){ 
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    }
    img.src=xi.responseText;
  }
}

getImageDataその後キャンバスで使用すると、問題なく動作します。

または、画像全体を保存したくない場合は、xおよびy座標をPHPスクリプトに渡して、その側でピクセルのrgba値を計算できます。PHPでそのような画像処理を行うための優れたライブラリーがあると思います。

このアプローチを使用したい場合は、実装のサポートが必要かどうかをお知らせください。

edit-1：phpスクリプトが公開されており、インターネットが悪意を持って使用する可能性があることを指摘しました。これを処理するには100万通りの方法がありますが、最も簡単な方法の1つは、ある種のURLの難読化です...安全なphpの実践は、別のgoogleに値すると思います; P

edit-2：よくある要望により、phpスクリプトではなく画像であることを確認するためのチェックを追加しました（from：PHP check fileが画像かどうか）。

Chromeローカルでコードをテストしているときに、このエラーが発生しました。に切り替えましたがFirefox、エラーは表示されなくなりました。多分別のブラウザに切り替えることは簡単な修正です。

最初の回答で与えられたソリューションを使用している場合はimg.crossOrigin = "Anonymous";、img変数を宣言した直後に追加するようにしてください（例：）var img = new Image();。

問題は、別のドメインからの外部イメージをロードすることです。これにより、キャンバスコンテキストのデータにアクセスしようとすると、セキュリティエラーが発生します。

クロスオリジンドメインからロードしてキャンバスを「汚染」しています。このMDNの記事をご覧ください。

https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

ローカルで作業する場合はサーバーを追加します

ローカルで作業しているときに同様の問題がありました。あなたのURLはローカルファイルへのパスになります。例えば、file：///Users/PeterP/Desktop/folder/index.html。

私はMACを使用していることに注意してください。

私はhttp-serverをグローバルにインストールすることでこれを回避しました。 https://www.npmjs.com/package/http-server

手順：

1. グローバルインストール： npm install http-server -g
2. サーバーを実行： http-server ~/Desktop/folder/

PS：私はあなたがノードをインストールしていると思います、そうでなければあなたは非常に遠くのnpmコマンドを実行することができません。

マットバーンズが彼の回答で述べているように、問題のある画像がホストされているサーバーでCORSを有効にする必要がある場合があります。

サーバーがApacheの場合、これは次のスニペット（ここから）をVirtualHost構成または.htaccessファイルに追加することで実行できます。

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

...それをVirtualHostに追加する場合、おそらくApacheの設定もリロードする必要があります（たとえばsudo service apache2 reload、ApacheがLinuxサーバーで実行されている場合）

私の問題はめちゃくちゃだったので、CORSの問題が発生しないように、画像をbase64でエンコードしました

今日同じ問題に遭遇し、次のコードで解決します。

HTMLコード：

<div style='display: none'>
  <img id='img' src='img/iak.png' width='600' height='400' />
</div>
<canvas id='iak'>broswer don't support canvas</canvas>

jsコード：

var canvas = document.getElementById('iak')
var iakImg = document.getElementById('img')
var ctx = canvas.getContext('2d')
var image = new Image()
image.src=iakImg.src
image.onload = function () {
   ctx.drawImage(image,0,0)
   var data = ctx.getImageData(0,0,600,400)
}

上記のようなコードで、クロスドメインの問題はありません。

私は同じ問題を抱えていました、そして私にとってそれは単に連結することによってうまくいきました https:${image.getAttribute('src')}