画像の減色処理とOctree

FukuokaJS #15 で発表した資料です。

サンプル
https://github.com/m-yoshiro/image-processing-samples/tree/main/src/colorQuant

Transcript

1. 画像の減色処理とOctree
   JavaScriptで頑張る
   松本 芳郎 / 2022.2.8 FukuokaJS #15
   

   View Slide

2. 自己紹介
   松本芳郎
   ● 株式会社マネーフォワード 経費本部
   ● フロントエンドエンジニア
   ● Twitter @bennkyougirai
   

   View Slide

3. この発表の趣旨
   おれは　減色処理に　トライした！
   

   View Slide

4. アジェンダ
   ● 減色処理の考え方
   ● Octree
   ● 実装
   

   View Slide

5. 減色処理の考え方
   

   View Slide

6. 画像の減色処理とは？
   画像の色を減らす処理をさす。限定された色数で表現された画像形式に変換すること。
   https://web.archive.org/web/20140605161956/http://www.microsoft.com/msj/archive/S3F1.
   aspx
   

   View Slide

7. 1. 画像データに使われている色を調べて「色集合」を求める。
   2. 小さい色集合を作る
   3. 2の色集合を元に、画像のピクセルを入れ替える
   減色処理の考え方
   

   View Slide

8. 色集合の操作のイメージ
   近い色は一色にまとめられる
   IMG IMG
   （減色済）
   色集合A 色集合B
   この対応関係を変換で利用
   

   View Slide

9. 減色処理の考え方 – 実装の方針
   1. 画像データのピクセルを全て走査して色集合Aを求める
   2. 色集合Aを元に、任意の色数に対応した色集合Bを作成する
   3. 再度、画像データを走査。ピクセルと色集合Bを突き合わせて、画像の色を置き換
   える。
   色集合を効率よく処理する必要がある
   

   View Slide

10. 色集合の減色方法は
    省略します！
    メディアンカットとか、 Populationとかあるよ
    

    View Slide

11. Octree
    

    View Slide

12. Octree?
    An octree is a tree data structure in which each internal node
    has exactly eight children. Octrees are most often used to
    partition a three-dimensional space by recursively subdividing it
    into eight octants. Octrees are the three-dimensional analog of
    quadtrees. The word is derived from oct (Greek root meaning
    "eight") + tree. Octrees are often used in 3D graphics and 3D
    game engines.
    https://en.wikipedia.org/wiki/Octree
    

    View Slide

13. Octree と 減色処理
    https://web.archive.org/web/20140605161956/http://www.microsoft.com/msj/archi
    ve/S3F1.aspx
    011 = 3
    

    View Slide

14. 実装
    

    View Slide

15. JS(TS)での実装
    普段のWebアプリケーション開発では出てこないモノたち
    ● ビット演算
    ○ 色を2進数として扱う
    ○ Octreeを作る時、子ノードのインデックスを決めるのにも使う
    ● Uint8ClampedArray
    ○ 色は0 ~ 255なので
    ○ ブラウザのimageDataもUint8ClampedArray
    

    View Slide

16. Octree
    OctreeNode
    ColorQuantizer (Tree)
    ● Treeを構成するNode
    ● 画像データを受け取るり、
    OctreeNodeを使って内部にTree
    を生成
    ● palette() で減色後の色集合を作
    る
    

    View Slide

17. 処理結果
    

    View Slide

18. 実演
    https://github.com/m-yoshiro/image-processing-samples/tree/main/src/colorQuant
    ※ パスをハードコードしてるのでみなさまの手元では調整が必要です。
    

    View Slide

19. ご清聴ありがとうございました。
    

    View Slide

20. https://fukuoka.moneyforward.com/
    エンジニア積極募集中！！！
    

    View Slide