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

目次

1. 概要
2. k-means
3. 結果
4. 処理のフロー
5. デモ
6. 参考

概要

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法で画像を減色するサンプルコード - めもめも