最近、ブログ記事のアイキャッチ画像の色を取得する機能を作りたいと思い、ずいぶん昔に「中位切分アルゴリズムを使った画像の色抽出」について書いた記事を思い出しました。
中位切分アルゴリズムとK-Meansクラスタリングアルゴリズム
中位切分アルゴリズムはカラーヒストグラムに基づくアルゴリズムで、再帰的に色空間を小さな立方体に分割し、最終的に各立方体内の色の中央値を代表色として採用します。このアルゴリズムは画像の色分布が不均一な場合に顕著な色のずれが生じやすく、抽出された色が不正確になることがあります。例えば、画像に赤が大量に含まれ、緑が少量しかない場合、抽出される色は赤に偏ります。また、中位切分アルゴリズムを使用すると、同じ画像から毎回同じ色が抽出されます。
一方、K-Meansクラスタリングアルゴリズムは画像の色分布が不均一な場合の処理に優れており、ランダムに初期化されたクラスタ中心を使用することで、毎回異なる色を抽出できます。
もちろん、K-Meansクラスタリングアルゴリズムは収束速度が遅いため、画像が大きいと処理に時間がかかることがあります。ただし、ブログ画像のサイズであれば無視できる程度です。中位切分アルゴリズムと同様に、K-Meansクラスタリングアルゴリズムも画像をcanvasに描画するため、クロスオリジンによりキャンバスが汚染される問題が発生します。
効果
これはウェブサイトに適用した後の効果です。ブラウザがウェブページのテーマカラーの表示をサポートしている場合、ステータスバーの色がアイキャッチ画像のランダムな色に変わることがわかります。

ステータスバーの色
以下はK-Meansクラスタリングアルゴリズムを使用して画像から5色を取得し、リアルタイムでレンダリングする例です:
K-Means クラスタリングアルゴリズム JavaScript コード
主要な JavaScript コードは以下の通りです:
mini-batch K-Means アルゴリズム
mini-batch K-Means アルゴリズムは K-Means アルゴリズムの最適化版です。mini-batch K-Means アルゴリズムはランダムに一部のデータのみを選択して計算するため、計算コストを削減し、大規模データセットをより高速に処理できます。ただし、ランダムに一部のデータのみを選択して計算するため、K-Means アルゴリズムよりも結果の精度が劣ります。
以下は mini-batch K-Means アルゴリズムで最適化した結果です: