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

画像の減色処理とOctree

m-yoshiro
February 08, 2022

 画像の減色処理とOctree

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

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

m-yoshiro

February 08, 2022
Tweet

More Decks by m-yoshiro

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. 減色処理の考え方

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. 処理結果

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide