MDNのカラーピッカーの例が機能していません。私のコードもそうです

Mozilla Developer Networkのページには、getImageData（）の助けを借りてカラーピッカーを作成できる例があります。コードはhttps://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas#A_color_pickerで確認できます。MDNのカラーピッカーの例が機能していません。私のコードもそうです

MDNページで正常に動作しているようです。しかし、CodePenやJSFiddleでは、壊れています。私は同じような問題で命令に従おうとしましたが、img.srcをURLに設定するとこのエラーが発生します：Uncaught TypeError： 'CanvasRenderingContext2D'で 'drawImage'を実行できませんでした：指定された値がタイプではありません '（CSSImageValueまたはHTMLImageElementまたはHTMLVideoElementまたはHTMLCanvasElementまたはImageBitmapまたはOffscreenCanvas） '。誰かが私を助けることを願っています。そのcodepen例が動作しないのはなぜ

出典

2017-04-04 Huy Tran

これはCORS [問題]（http://stackoverflow.com/questions/22097747/how-to-fix-getimagedata-error-the-canvas-has-been-tainted-by-cross-のように見えます元データ） – Legends

@Legendsはいです。これは 'img.crossOrigin =" Anonymous "で修正されました。しかし、問題は依然として続く。コードをテストするたびに、タブをオフにしてもう一度オンに戻す必要があります。最初に開いたときに一度しか動作しません。 F5でリフレッシュすると、汚れたキャンバスエラーがスローされます。タブを再起動せずにコードをテストできる方法はありますか？そして、この問題は他の人がコンピュータで私のゲームをリフレッシュしようとすると影響を及ぼしますか？ –

img srcの後にJSセクションにこの行を追加し、この例はうまくいきます。

img.crossOrigin = "Anonymous"

クロスオリジン汚染やHTMLキャンバスと関係があります。どうやら、要素が別のドメインから来た場合、キャンバスは上の行で正しいクロスオリジン属性を設定しない限り、キャンバスは汚染され、そこからデータを取り出すことはできません。このエラーは、ヘッダが送信元から送信されたときにイメージに設定されていない場合にも発生する可能性があります。

CodePenからこのブログの記事でより多くの情報があります：https://blog.codepen.io/2013/10/08/cross-domain-images-tainted-canvas/

ここで働くCodePenへのリンクがあります！
http://codepen.io/illuminatedspace/pen/WpWQmo?editors=1010#0

出典

2017-04-04 21:10:19 illuminatedSpace

素晴らしい！それは今働く。しかし、コードをテストするたびに、タブをオフにして再度オンにする必要があります。最初に開いたときに一度しか動作しません。 F5でリフレッシュすると、**汚染キャンバスエラー**がスローされます。タブを再起動せずにコードをテストできる方法はありますか？そして、この問題は他の人がコンピュータで私のゲームをリフレッシュしようとすると影響を及ぼしますか？ –

タブをオフにすることで意味が分かりません。私はコードペンの例でその問題を抱えていないので、私はあなたが別のコンテキストについて話していると仮定しています。多分私はコードスニペットを見た場合、私はさらに助けることができます。 – illuminatedSpace

私のコードの問題は、このCodePen [リンク]（http://codepen.io/illuminatedspace/pen/WpWQmo?editors=1010#0）とまったく同じです。それは何らかの形で、ページが最初に開いたときにのみ機能します。 ** F5 **でページを更新すると、**汚れたキャンバスエラー**が再びスローされます。 ** x **を押してタブを閉じた後、リンクをクリックして新しいタブを開くと、それは再び機能します。 –

：

「あなたはあなたのキャンバスにCORSの承認を得ずに画像を使用することができますがが、そうすることはキャンバスは汚染キャンバスが汚染されたら、あなたはもう戻ってデータを引き出すことはできません。たとえばキャンバスtoBlob（）、toDataURL（）、またはgetImageData（）メソッドを使用することはできません "(Ironically also from MDN)

出典

2017-04-04 21:06:33

MDNのカラーピッカーの例が機能していません。私のコードもそうです

答えて

関連する問題