ImageFluxBinary

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

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
   ͳͷͰಡΜ ͩ෼͕ফ͑ͳ͍ SFBEFS
   
   CVGJP/FX3FBEFS S Ͱ 1FFL
   ͕࢖͑Δ DVSTPS DVSTPS
10. 画像バイナリについて 〜ここから本題 • 画像コンテナ • ⽣RGBデータ • メタ情報、複数画像 • コンテナ構造の類型 • 画像バイナリの情報要素を実際に読む • 画像形式の区別 • GIF, JPEG, PNG, WebP
11. 画像コンテナ (1/4) • 画像⾃体は ただの RGB配列 (印刷⽤だと CMYK) TIBEPX
    NBTL BQBUVSF HSJMM TMPU
    NBTL 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 GUZQF
    NJG IFJD IFWD NFUB NEBU IEMS TVCUZQFQJDU JMPD JUFN*% PGGTFU
    FYUFOU JQSQ JTQF
    XJEUI
    IFJHIU IWD$
    IFWD$POGJH /"-
    6OJU /"-
    6OJU QJUN
    JUFN*% ʜ 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. 以上 困った時に画像ファイル解析する時の役に⽴てればと