getImageData() エラーを解決します: キャンバスがクロスドメイン データによって汚染されています
P粉343141633
2023-08-29 12:52:11
<p>私のコードはローカルホストでは正常に動作しますが、Web サイトでは正常に動作しません。 </p>
<p>この行 <code>.getImageData(x,y,1,1).data</code>:</p> について、コンソールからこのエラーが表示されます。
<pre class="brush:php;toolbar:false;">Uncaught SecurityError: 'CanvasRenderingContext2D' で 'getImageData' の実行に失敗しました: キャンバスはクロスオリジン データによって汚染されています。</pre>
<p>私のコードの一部:</p>
<pre class="brush:php;toolbar:false;">jQuery.Event.prototype.rgb=function(){
var x = this.offsetX || (this.pageX - $(this.target).offset().left),y = this.offsetY || (this.pageY - $(this.target).offset().上）;
if (this.target.nodeName!=="CANVAS")null を返します。
this.target.getContext('2d').getImageData(x,y,1,1).data を返します。
}</pre>
<p><strong>注: </strong>画像 URL (src) はサブドメイン URL から来ています</p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
他の人が言ったように、クロスオリジンドメインからロードすることでキャンバスを「汚染」しています。
https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image
ただし、次のように設定するだけでこれを防ぐことができます。
リーリーこれは、リモート サーバーが次のヘッダーを正しく設定している場合にのみ機能します:
リーリーダイレクト リンク オプションを使用する場合の Dropbox ファイル ピッカーこれは良い例です。私は oddprints.com でこれを使用して、リモート ドロップボックスの画像 URL から画像をキャンバスに吸い込み、画像データをサーバーに送信します。すべてJavaScriptで書かれています