私は200x200の画像を持っているページにたくさんの製品を持っています。これでの最初の実行は、各ピクセルのデータ(forループ、1つはx、もう1つはy)を取得し、次にrgbを16進数に変換し、それらを配列に格納してから、最も頻繁なデータを取得することでした。このスクリプトは、一度に1ページあたり96アイテムで実行する必要があります。
現在、キャンバスを作成し、そのキャンバスに商品画像を配置してから、上記の操作を実行します。
これを高速化するある種の平均化アルゴリズムはありますか?
私は200x200の画像を持っているページにたくさんの製品を持っています。これでの最初の実行は、各ピクセルのデータ(forループ、1つはx、もう1つはy)を取得し、次にrgbを16進数に変換し、それらを配列に格納してから、最も頻繁なデータを取得することでした。このスクリプトは、一度に1ページあたり96アイテムで実行する必要があります。
現在、キャンバスを作成し、そのキャンバスに商品画像を配置してから、上記の操作を実行します。
これを高速化するある種の平均化アルゴリズムはありますか?
はい!
Lokesh Dhakarは、画像のドミナントカラーを計算する「colorthief」と呼ばれるスクリプトを作成しました。修正されたメディアンカット量子化アルゴリズム(MCCQ)を使用して、色をすばやくクラスター化し、ドミナントカラー(またはカラーパレット全体)を決定します。
ここにデモがあります:http://lokeshdhakar.com/projects/color-thief/そしてスクリプトはここのgithubで利用可能です:https ://github.com/lokesh/color-thief
ライブラリなどすべてを使用するのは簡単に聞こえますが、目的をほぼ果たす、はるかに単純なソリューションを見つけました。ブラーフィルターを適用すると、ピクセル強度の平均が取られます。したがって、ピクセル値がかなり高い画像にブラーを適用すると、
filter:blur(30px);
また
filter:blur(50px);
または適切なものであれば、画像全体を平均化し、ほとんどの場合画像の目立つ色である無地の背景色を提供します。
実行がはるかに簡単で、ほとんどの場合に機能するはずです。ぼかし量をいじってみてください。
また、overflow-yを非表示に設定することを忘れないでください。これは、ぼかしが大きいと画像の外側に白いパディングが発生するためです。オーバーフローを非表示にすると、それが修正されます。
お役に立てば幸いです:)