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

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

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

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

減色処理の考え方 

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

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

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

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

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

Octree 

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 

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

実装 

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

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

処理結果 

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

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

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