問題タブ [getimagedata]

JSフィドルリンク

キャンバス（線形グラデーションを持つ）をクリックしようとしており、クリックした時点で画像データを取得しています

また、その（クリック）ポイントに相対的に配置された黄色（ピッカー）を配置したい

問題1：下部（白）をクリックすると、色の値が間違っています

問題 2: 黄色 (ピッカー) がクリック ポイントに正確に配置されていない

注 :border-radius:50% のため、キャンバスが丸く見えます

（上記のフィドルリンク）で提供されるコードの重要な部分は

フィドルを含む編集 回答の方が良いでしょう:)

クロムでのみ上記のエラーが発生しています。私のコード (以下) は mozilla で正常に動作します。corss ドメインの問題はありません。では、なぜクロムで上記のエラーが発生するのでしょうか?

ランダム ノイズを含むキャンバスを生成しようとしましたが、60 fps でランダム ピクセルのキャンバス全体を生成する余裕がなかったため、最終的にメモリ内の一時キャンバスを使用して小さな 64x64 タイルを生成し、コンテキスト フィルを使用しました。パターンを繰り返し、javascript エンジンを使用する代わりに、ブラウザーがそれらのバイトを画面にプッシュできるようにします。

それははるかに高速で、フルスクリーンでも iOS デバイスで 60 fps を確保できましたが、数分後には fps が低下し、非常に遅くなることに気付きました。

このフィドルでは、60Hz に制限する必要がある requestAnimationFrame を使用していません。代わりにカスタム ループを使用しています。Macbook では、500Hz 前後で開始し、問題を強調するために急速に減速します。

http://jsfiddle.net/Victornpb/m42NT/2/

getImageData を使用して、point(0,0) のアルファが 0 で、point(img.width, img.height) のアルファが 0.5 の画像に放射状のフェード効果を作成しようとしています。

(最後の点のアルファは 1.0 ですが、0.5 だと想像してください。)

forを使用して、ループで線形アルファ増加を作成できました

しかし、左端は（明らかに）ループが繰り返されるにつれてより明確になります。

私は 2 つのループを使用してみました。

しかし、これのパフォーマンスは非常に遅く、私が探しているフェードは実現しません。また、それを適切に行っているかどうかもわかりません。Mozilla Hacks サイトで概説されているように、型指定された配列を使用した Faster Canvas Pixel Manipulationも試しましたが、その方法を使用しても画像はキャンバスに描画されませんでした。（私はChromeを使用しています-それが問題なのか、それとも私のコードなのかはわかりません。）

何か案は？

編集:素晴らしい解決策をくれたmarkEに感謝します-それは美しく速いです。彼へのコメントでこれについて言及しましたが、マークのデモにフェードが描かれているグレースケール画像（私の要件の一部）を作成するための完全なコードは次のとおりです。

HTML5 キャンバスに画像を描画します。画像のソースは SVG 文字列です。次に、キャンバスの ImageData を取得します。これは Firefox と Chrome ではうまく機能しますが、IE11 ではセキュリティ エラーが発生します。

問題を再現するための簡単なテスト ページを作成します。

XMLHttpRequest を使用した回避策をいくつか見つけましたが、それらの画像ソースは SVG 文字列ではなく実際の URL です。

SVG文字列を画像ソースとして使用する方法はありますが、getImageDataのときにIE11でセキュリティエラーを呼び出さないでしょうか?

私は実際に各画像のデータを取得しようとしていますが、これを行うには、各画像をキャンバスに描画する必要があります。

ノード インタープリターは、イメージが完全に読み込まれていないと言っていますが、その理由はわかりません。

検索しても答えが見つからなかったので、誰かが私のプログラムの何が問題なのか知っていますか?ここに私のコードがあります:

クライアントは、製品画像のドミナント カラーを抽出するプログラムについてサポートを必要としていました。

これを Javascript ですばやく実装することができました。以下のアルゴリズムは、画像内の T シャツの色をすばやく推定するために、画像上の 3x3 グリッドの中央の正方形のみをサンプリングします。

問題の画像はこれです（下のプレビュー）。

ただし、この画像が上記のコードで処理されたときの結果は、マシン/ブラウザーによって異なります#FF635E。Windows7 を実行し、Firefox 32 を使用しているマシンで表示されるものです。Mac を実行しているクライアントは#FF474B、Safari と#FF474CFirefox 33 で結果を取得します。

結果は近いですが、理想的にはまったく同じではないのはなぜですか? getImageData実際、ローカルのセットアップによって異なりますか、それとも JPG データは異なるマシンで異なる方法で解釈されていますか?

編集: この画像は 1 回限りのケースではありません。このような色の変化は、クライアントが処理を要求した画像の範囲全体で見られました。私のクライアントと私は、同じ画像セットに対して異なる結果を得ました。