カラーパレット抽出ツール

仕組み

画像はオフスクリーンキャンバスに、長辺が最大200pxになるよう縮小して描画されます。サムネイルでも元画像とほぼ同じ色分布が得られるうえ、処理速度が桁違いに速くなるためです。getImageData()で取得した生のRGBAピクセルのうち、半分以上透明なものは除外されるので、透明背景のロゴが「ほぼ何もない」と判定されることはありません。残ったピクセルはチャンネルごとに6段階、合計216個のバケットに振り分けられ、各バケットは実際のピクセル値の合計を保持します。ピクセル数の多い順にバケットを並べ、上位N個を採用し、各スウォッチはバケットの中心値ではなく実際に含まれたピクセルの平均値とすることで、結果が不自然に単純化されるのを防いでいます。

つまりこれはk-meansやメディアンカットではなく、均一量子化によるヒストグラム集計です。あえてこの方式にしているのは、瞬時に処理できて、毎回必ず同じ結果が返ってくるためです(k-meansはランダムな初期値から始まるため、実行のたびにわずかに異なる結果になり得ます)。正直な弱点として、頻度ランキングは「重要度」ではなく「面積」を測っています。ベージュの壁を背景にした人物写真は、被写体の青いジャケットより先に5種類ものベージュを返すでしょう。壁の方が単純にピクセル数が多いからです。主役の色を知りたい場合は、色数を増やしてリストの後半を見るか、注目したい領域だけを切り抜いてからアップロードしてください。

画像がサーバーに送られることはありません。ローカルのオブジェクトURLとして読み込まれ、メモリ内のキャンバスに描画され、バイト列として読み取られる、すべてこのページのJavaScript内で完結する処理です。