技術めいた何か

1人の大学生によるIT系の記事群

HTML5+Javascriptでドット画像への変換をしてみた

HTML5 + JSで画像処理の第3弾

前回は去年(2015)の8月に2値化処理やってみた旨を記事にしました。

atofaer.hatenablog.jp

今回は、指定画像を元にドット画像を生成する処理を書いてみました。

処理の流れは以下のようになりました。

  1. 画像読み込み
  2. 縦の辺の長さと横の辺の長さの公約数を求めて配列に格納(ドットの辺の長さ)
  3. ループで各ドットの矩形内のrgb値から1ピクセルごとのhue値(色相/0-359)を求める。また、その時のrgb値を連想配列に入れていおく
    hue値が重複した時は古いrgb値が優先される
  4. 3の1ループ毎に求めたhue値を6つのグループに分ける
    1. 330〜||〜29
    2. 30〜89
    3. 90〜149
    4. 150〜209
    5. 210〜269
    6. 270〜329
  5. 矩形内のhue値のグループ分けが済んだら、一番要素数の多いグループを特定
  6. 5で特定したグループのhue値を昇順にソートして中央値(偶数の時は中央の二値の小さい方)を求める。
  7. 6で得たhue値から、連想配列からrgb値を得る
  8. 7で得たrgb値でドット内の矩形を塗りつぶす

ソースコードGitHubにあげてあります。

github.com

最後に

一通り処理を書いた後に、調べたところ、ベクトルを使う方法があるみたいですね。

それはまたの機会に。。。