Javascript

「キャンバスがクロスオリジンデータによって汚染されているため、キャンバスから画像データを取得できません」



Unable Get Image Data From Canvas Because Canvas Has Been Tainted Cross Origin Data



まず、問題の説明：

html5をサポートするブラウザでjavascriptスクリプトを実行します。スクリプトは、主にWebページのラベルキャンバスを操作するためのものです。エラー操作は、getImageData（img、……）、



chromeのエラーメッセージは次のとおりです。キャンバスがクロスオリジンデータによって汚染されているため、キャンバスから画像データを取得できません'、

fireFoxのエラーメッセージは次のとおりです。セキュリティエラー 'コード：' 1000'



キーコードは次のとおりです。

画像 
init:function(){ var img=new Image()  img.src='http://10.0.5.199:8080/hadoopWebGis2/jsp/map.jsp?img=0_0_0' var ctx=this.context3D img.onload=function(){ ctx.drawImage(img,0,0) var imgData=ctx.getImageData(0,0,img.width,img.height) //Error line ctx.putImageData(imgData,50,50) } },
画像

第二に、調査と回答

インターネットを検索したところ、ほとんどの人がこう言っていることがわかりました。getImageData関数はサーバー側で実行する必要があります。サーバー環境がない場合（たとえば、ローカルhtmlページのみ、ローカルイメージを操作する場合）、レポートが表示されます。'キャンバスがクロスオリジンデータによって汚染されているため、キャンバスから画像データを取得できません'エラー。



しかし、明らかに、上記のサンプルプログラムはTomcatサーバーで実行されており、それでもこのエラーが報告されています。それで、問題は何ですか？

後で私はstackoverflowで問題の原因を見つけました。（（stackoverflowWebサイトを強くお勧めします。これは、C、C ++、Java、Web、Linuxなどの幅広いトピックをカバーする非常によく知られている技術的なQ＆AWebサイトです。ほとんどの中国人学生は英語のウェブページを読むのが好きではありませんが、実際、中国のウェブページには多くの問題があります。 stackoverflowなど、多くの優れた英語のWebサイトで回答を見つける方法はたくさんあります。 ）。

stackoverflowに関するこの質問への回答は次のとおりです。

次のように翻訳：なりすましを防ぐために、ブラウザは画像データを追跡します。あなたが1つを置くとき「」キャンバスドメインとは異なります「」画像がキャンバスに配置されると、キャンバスは「汚染」（汚染、汚れ）になり、ブラウザではキャンバスのピクセルを操作できなくなります。これは、複数のタイプのXSS / CSRF攻撃（2つの典型的なクロスサイト攻撃）をブロックするのに非常に役立ちます。

上記の言葉の要点は、赤でマークされたテキストが「キャンバスのドメインとは異なる」ということです。そこで、画像リクエストとページリクエストのアドレスを確認したところ、フィールドが実際に異なっていることがわかりました。

Image request address: http://10.0.5.199:8080/hadoopWebGis2/jsp/map.jsp?img=0_0_0  Enter the page in the browser to stop at: http://summer1:8080/hadoopWebGis2/jsp/map3D.html

（hostsファイルのマッピングは10.0.5.199：summer1ですが、ブラウザーが2つを自動的に変換すると言っても過言ではありませんが、理由はわかりませんが、別のドメインとして認識されます。）

変更後、問題は解決しました：

画像 
Image request address: http://summer1:8080/hadoopWebGis2/jsp/map.jsp?img=0_0_0 Enter the page in the browser to stop at: http://summer1:8080/hadoopWebGis2/jsp/map3D.html  -----------------or------------------------- Image request address: http://10.0.5.199:8080/hadoopWebGis2/jsp/map.jsp?img=0_0_0  Enter the page in the browser to stop at: http://10.0.5.199:8080/hadoopWebGis2/jsp/map3D.html
画像

-------------------------------------------------- -------------------------------------------------- -------------------------------------------------- ---

オフトピック：サーバー環境がないのはなぜですか（たとえば、ローカルhtmlページだけで、ローカルイメージを操作している）、レポートされます'キャンバスがクロスオリジンデータによって汚染されているため、キャンバスから画像データを取得できません'エラー？

個人的な理解：ローカルWebページのドメインはファイル：//、といった： file：///home/summer/Desktop/test.html ローカル画像は間違いなくfile：//で始まっていません。たとえば、Linux環境の画像は/home/summer/Desktop/test.pngであり、Windows環境の画像はc： tmp test.pngです。

原文： http://www.cnblogs.com/jdksummer/articles/2565998.html

転載：https：//www.cnblogs.com/9546-blog/p/3392897.html