【JavaScript】K-meansを使って画像を減色する。全てフルスクラッチ【canvas】

HTML




概要

K-menasで画像を減色してみた。
JavaScript + canvasを使用。
OpenCVとかライブラリは使わず全てフルスクラッチ

K-means

クラスタリングなどを行う際の定番なアルゴリズムです。
Wikipedia

結果

うまく減色することができました。
ソースは後ほど紹介します。
数字は、k-meansのクラスタ数。

処理のフロー

処理のフローとしては、
1. canvasに画像を描画
2. 描画されたピクセルr,g,bを一つの配列に全てpushする
3. この配列をk-meansでクラスタリングする
4. 画像の各ピクセルが含まれるクラスタのrgb値を描画する。
といった流れです。

デモ

クラスタ数を数字で入力し”run”を実行。
JSタブでソースが見れます。

デモ : リンク

参考

【JavaScript】K-meansをアニメーション・可視化したら蜘蛛みたいな動きをした|その1
k-means法で画像を減色するサンプルコード – めもめも