画像の減色処理とOctree

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

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

Transcript

1. 画像の減色処理とOctree JavaScriptで頑張る 松本 芳郎 / 2022.2.8 FukuokaJS #15
2. 自己紹介 松本芳郎 • 株式会社マネーフォワード 経費本部 • フロントエンドエンジニア • Twitter @bennkyougirai
3. この発表の趣旨 おれは　減色処理に　トライした！
4. アジェンダ • 減色処理の考え方 • Octree • 実装
5. 減色処理の考え方
6. 画像の減色処理とは？ 画像の色を減らす処理をさす。限定された色数で表現された画像形式に変換すること。 https://web.archive.org/web/20140605161956/http://www.microsoft.com/msj/archive/S3F1. aspx
7. 1. 画像データに使われている色を調べて「色集合」を求める。 2. 小さい色集合を作る 3. 2の色集合を元に、画像のピクセルを入れ替える 減色処理の考え方
8. 色集合の操作のイメージ 近い色は一色にまとめられる IMG IMG （減色済） 色集合A 色集合B この対応関係を変換で利用
9. 減色処理の考え方 – 実装の方針 1. 画像データのピクセルを全て走査して色集合Aを求める 2. 色集合Aを元に、任意の色数に対応した色集合Bを作成する 3. 再度、画像データを走査。ピクセルと色集合Bを突き合わせて、画像の色を置き換 える。 色集合を効率よく処理する必要がある
10. 色集合の減色方法は 省略します！ メディアンカットとか、 Populationとかあるよ
11. Octree
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
13. Octree と 減色処理 https://web.archive.org/web/20140605161956/http://www.microsoft.com/msj/archi ve/S3F1.aspx 011 = 3
14. 実装
15. JS(TS)での実装 普段のWebアプリケーション開発では出てこないモノたち • ビット演算 ◦ 色を2進数として扱う ◦ Octreeを作る時、子ノードのインデックスを決めるのにも使う • Uint8ClampedArray ◦ 色は0 ~ 255なので ◦ ブラウザのimageDataもUint8ClampedArray
16. Octree OctreeNode ColorQuantizer (Tree) • Treeを構成するNode • 画像データを受け取るり、 OctreeNodeを使って内部にTree を生成 • palette() で減色後の色集合を作 る
17. 処理結果
18. 実演 https://github.com/m-yoshiro/image-processing-samples/tree/main/src/colorQuant ※ パスをハードコードしてるのでみなさまの手元では調整が必要です。
19. ご清聴ありがとうございました。
20. https://fukuoka.moneyforward.com/ エンジニア積極募集中！！！