Upgrade to Pro — share decks privately, control downloads, hide ads and more …

画像の減色処理とOctree

C0e40025e5098e025a249b0cda428434?s=47 m-yoshiro
February 08, 2022

 画像の減色処理とOctree

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

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

C0e40025e5098e025a249b0cda428434?s=128

m-yoshiro

February 08, 2022
Tweet

More Decks by m-yoshiro

Other Decks in Programming

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/ エンジニア積極募集中!!!