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

ImageFluxBinary

60a549cd4a7fa59e09efdbdc5fd2a304?s=47 yoya
August 30, 2019

 ImageFluxBinary

ImageFluxイベントで ImageFluxの話といいつつ、画像コンテナの一般的な話をします。

60a549cd4a7fa59e09efdbdc5fd2a304?s=128

yoya

August 30, 2019
Tweet

More Decks by yoya

Other Decks in Technology

Transcript

  1. ImageFluxと 画像バイナリ処理 〜 または画像コンテナ⼊⾨〜 2019/8/30(Fri) (株)awm “よや” yoya@awm.jp

  2. ⾃⼰紹介 〜 @yoya • ImageFlux の開発初期からお⼿伝いしてます • 仕事:富⼠通 → IIJ

    → i-revo(KONAMI) → GREE → 無所属 • ずっとC⾔語でバイナリ弄る仕事。あと PHP, Go、たまに⼿作業 • 趣味:ImageMagick ウォッチャー (ソース差分追っかけ) • 2013年11⽉に GIF/PNG8 ⽣成が突然速くなったのは僕の魔改造 • その他:携帯Flash全盛時代に SWF バイナリ変換作ってました • https://ja.osdn.net/projects/swfed/
  3. ⽬次 • バイナリとは • ImageFlux のバイナリ処理 • 画像コンテナについて • 画像バイナリを直接読む

  4. バイナリとは (1/2) • 諸説ありますが… • ⽂字として読めないデータ (ascii/binary mode) • ファイルをバイナリエディタに渡すと表⽰するコレ

  5. バイナリとは (2/2) • 普通のコンピュータは電気信号 low/high の2値論理で制御 • (量⼦コンピュータ等違う原理のもある。ひと昔前だとパラメトロン) • 0

    or 1 の2値情報“ビット”が最⼩単位 • ビットを8つまとめてバイト • バイトは16進数で2桁表⽰すると便利 CJUT CZUF 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 1 1 0 1 1 1 0 1 Y%%
  6. ImageFlux のバイナリ処理 (1/4) 〜stream • 全部データが揃ってからまとめて処理 (これだと簡単) • ストリーム処理 (ImageFlux

    はこっちで処理, Encode も同様) JPEG JPEG decoder JPEG /FUXPSLసૹ࣌ʹ ύέοτ෼ׂ͞Ε ͯಧ͘ JPEG decoder ಧ͍ͨ͸͔͠Β %FDPEF͢Δ
  7. ImageFlux のバイナリ処理 (2/4) 〜stream • まとめて処理 • ストリーミング。処理を短くする余地がある (処理内容次第) decode

    encode
  8. ImageFlux のバイナリ処理 (3/4) 〜 io • 画像ファイルを判別して対応するデコーダにデータを渡したい • 先頭を4バイト読んで区別する ?

    ? JPEG PNG GIF ? ? JPEG decoder ઌʹ3FBEͨ͠෼ ͕ফ͑ͯΔ DVSTPS DVSTPS
  9. ImageFlux のバイナリ処理 (4/4)〜 bufio • bufio を使うと Peek メソッドが使える •

    Peek は既読データを消さない ? ? JPEG PNG GIF ? ? JPEG decoder 1FFLͳͷͰಡΜ ͩ෼͕ফ͑ͳ͍ SFBEFSCVGJP/FX3FBEFS S Ͱ 1FFL͕࢖͑Δ DVSTPS DVSTPS
  10. 画像バイナリについて 〜ここから本題 • 画像コンテナ • ⽣RGBデータ • メタ情報、複数画像 • コンテナ構造の類型

    • 画像バイナリの情報要素を実際に読む • 画像形式の区別 • GIF, JPEG, PNG, WebP
  11. 画像コンテナ (1/4) • 画像⾃体は ただの RGB配列 (印刷⽤だと CMYK) TIBEPXNBTL BQBUVSF

    HSJMM TMPUNBTL 3FUJOBҎલͷϞχλ͸ ໨Λ͚ۙͮΕ͹υοτ ͕ͻͱͭͻͱͭݟ͑ͨ $35Ϟχλ ϒϥ΢ϯ؅ ͷྫͰ͝ΊΜͳ͍͞
  12. 画像コンテナ(2/4) • それなら RGB 配列データだけ持てば良いのか? … R G B R

    G B 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 3FE (SFFO #MVF CJUT CZUF
  13. 画像コンテナ (3/4) • 表⽰サイズがわからないと表⽰できない • R のビット幅は 8 とは限らない •

    昔は16⾊や4096⾊も多かった • 最近は10,12ビットも増えてる … R G B R G B ਖ਼ղ ෆਖ਼ղ CJUT 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 3FE (SFFO #MVF
  14. 画像コンテナ (4/4) • メタデータが必要 • 画像サイズ(width x height)、ビット深度 (⼤抵は 8、たまに違う)

    • ガンマ補正 (⼤抵は 2.2 、昔の Macintosh は 1.8 、あと 2.4 とか⾊々) • 画像の種類 (signature, magic) • サムネールも⼊れたい (multi image) R G B R G B … R G B R G B width, height, depth … R G B R G B width, height, depth … R G B R G B width, height, depth … thumbnail signature signature
  15. 画像コンテナ類型 (1/5) • 固定フォーマット • チャンク構造 • 辞書型 • ツリー型

    chunk chunk chunk Size Size Size dictionary offset offset offset container data data data data data container data data data data data data data data data data data
  16. 画像コンテナ類型 (2/5) • 固定フィールド (BMP) • 先頭から情報を順に並べる https://docs.microsoft.com/ja-jp/previous-versions/dd183376(v=vs.85)

  17. 画像コンテナ類型 (3/5) • チャンク構造 (PNG) • リストとかブロック構造とも Signature IHDR IDAT

    IEND IHDR Size name Width Height Depth … CRC IEND Size name CRC chunk chunk chunk Size Size Size IDAT Size name Zlib compressed data CRC Signature ¥x89 P N G ^r ^n ^z ^n
  18. 画像コンテナ類型 (4/5) • 辞書型構造 (TIFF) Header IFD type count data

    type count data type count offset data data type count offset XJEUI IFJHIU *NBHF  id id id id  CZUFT IFD Pointer
  19. 画像コンテナ類型 (5/5) • ツリー構造 (HEIF) • ISOBMFF に基づく • いわゆる

    QuickTime GUZQFNJG IFJD IFWD NFUB NEBU IEMS TVCUZQFQJDU JMPD JUFN*% PGGTFU FYUFOU JQSQ JTQFXJEUI IFJHIU IWD$ IFWD$POGJH /"-6OJU /"-6OJU QJUNJUFN*% ʜ GUZQ NFUB JMPD IEMS QJUN JQSQ JTQF IWD$ NEBU
  20. 画像バイナリを直接読む (1/12) • どうやって読むか? (例) • macOS なら 0xED •

    Windows なら Stirling, Bz • UNIX なら hexdump, xxd • もしくは⾃作でも
  21. 画像バイナリを直接読む (2/12) 種類が沢⼭ある (独断と偏⾒による分類) JPEG PNM PNG WebP RBG GIF

    HEIF TIFF BMP "ODJFOU ݹ୅ 'VUVSF ະདྷ .BUVSF ੒ख़ -FHBDZ ݹΊ .PEFSO ݱ୅ AVIF JPEG2K JPEG XR PIC PICT %PNFTUJD ࠃ಺ MAG Q0 SUN SGI RLE
  22. 画像を直接読む (3/12) 〜 GIF (1/2) • https://www.w3.org/Graphics/GIF/spec-gif89a.txt • Signature のすぐ後ろにある

    signature width height
  23. 画像を直接読む (4/12) 〜 GIF (2/2) • シグネチャのすぐ後ろが width, height

  24. 画像を直接読む (5/12) 〜 JPEG (1/2) • https://www.w3.org/Graphics/JPEG/jfif3.pdf SOI APP0 SOFx

    … SOFx Size marker P Y X XJEUI IFJHIU …
  25. 画像を直接読む (6/12) 〜 JPEG (2/2) • ffc? (SOFx チャンク) を探す

  26. 画像を直接読む (7/12) 〜 PNG (1/3) • http://www.libpng.org/pub/png/spec/1.2/PNG-Contents.html • Signature IHDR

    IDAT IEND IHDR Size name Width Height Depth Color Type Comp Filter Interla CRC PLET Size name Palette (Color Table) CRC IEND Size name CRC PLTE IDAT Size name Zlib compressed data CRC Signature ¥x89 P N G ^r ^n ^z ^n
  27. 画像を直接読む (8/12) 〜 PNG (1/3) • 決まった場所にある

  28. 画像を直接読む (9/12) 〜 PNG (3/3) • color type 2 =>

    PNG24
  29. 画像を直接読む (10/12) 〜 WebP (1/3) • https://developers.google.com/speed/webp/docs/riff_container • https://tools.ietf.org/html/rfc6386#page-121 •

    Lossy • Lossless RIFF WEBP VP8 VP8 Size Start code width height EB Size … RIFF WEBP VP8L VP8L Size …
  30. 画像を直接読む (11/12) 〜 WebP (2/3) • RIFF で包んだ VP8 ストリームから探す

  31. 画像を直接読む (12/12) 〜 WebP (3/3) • Lossless かどうか分かる

  32. 以上 困った時に画像ファイル解析する時の役に⽴てればと