JavaScript で画像の平均色を取得する
画像の平均色を決定するのは難しい作業になる場合があります。ただし、JavaScript と HTML5 Canvas を使用すると、この目的を達成することができます。
キャンバスのアプローチ
このソリューションの中心となるのは、
JavaScript 関数 getAverageRGB は、引数として HTML 画像要素 (imgEl) を受け取ります。画像の寸法に一致するようにキャンバス サイズを設定し、drawImage メソッドを使用して画像データをキャンバスに転送します。
次に、スクリプトは getImageData メソッドを使用して、画像のピクセル データを表すオブジェクトを取得します。このデータを反復処理して、サンプリングされた各ピクセルの赤 (r)、緑 (g)、および青 (b) コンポーネントを累積します。
平均色を取得するには、累積された値を合計数で割ります。サンプリングされたピクセルの数。次に、結果は整数値に丸められ、RGB 形式で平均色を表します。
クロスオリジンの問題
この方法は次の仮定に依存していることに注意してください。画像は同じドメイン内に含まれているか、CORS 権限を介してアクセスされています。画像が別のドメインに存在する場合、セキュリティ制限により、スクリプトがそのピクセル データにアクセスできない可能性があります。
互換性
この方法では、ブラウザによる HTML5 Canvas のサポートが必要です。古いブラウザまたはサポートされていないブラウザとの互換性を確保するには、Internet Explorer の excanvas などのフォールバック方法を使用することをお勧めします。
以上が「質問」形式を念頭に置いて、タイトルのオプションをいくつか示します。 * JavaScript を使用して画像の平均色を計算するにはどうすればよいですか? (わかりやすくて有益です) * JavaScript:の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。