ImageFluxBinary - Speaker Deck

Slide 1

Slide 1 text

ImageFluxと画像バイナリ処理〜または画像コンテナ⼊⾨〜 2019/8/30(Fri) (株)awm “よや” [email protected]

Slide 2

Slide 2 text

⾃⼰紹介〜 @yoya • ImageFlux の開発初期からお⼿伝いしてます • 仕事：富⼠通 → IIJ → i-revo(KONAMI) → GREE → 無所属 • ずっとC⾔語でバイナリ弄る仕事。あと PHP, Go、たまに⼿作業 • 趣味：ImageMagick ウォッチャー (ソース差分追っかけ) • 2013年11⽉に GIF/PNG8 ⽣成が突然速くなったのは僕の魔改造 • その他：携帯Flash全盛時代に SWF バイナリ変換作ってました • https://ja.osdn.net/projects/swfed/

Slide 3

Slide 3 text

⽬次 • バイナリとは • ImageFlux のバイナリ処理 • 画像コンテナについて • 画像バイナリを直接読む

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

バイナリとは (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%%

Slide 6

Slide 6 text

ImageFlux のバイナリ処理 (1/4) 〜stream • 全部データが揃ってからまとめて処理 (これだと簡単) • ストリーム処理 (ImageFlux はこっちで処理, Encode も同様) JPEG JPEG decoder JPEG /FUXPSLసૹ࣌ʹ ύέοτ෼ׂ͞Ε ͯಧ͘ JPEG decoder ಧ͍ͨ͸͔͠Β %FDPEF͢Δ

Slide 7

Slide 7 text

ImageFlux のバイナリ処理 (2/4) 〜stream • まとめて処理 • ストリーミング。処理を短くする余地がある (処理内容次第) decode encode

Slide 8

Slide 8 text

ImageFlux のバイナリ処理 (3/4) 〜 io • 画像ファイルを判別して対応するデコーダにデータを渡したい • 先頭を4バイト読んで区別する？？ JPEG PNG GIF ？？ JPEG decoder ઌʹ3FBEͨ͠෼ ͕ফ͑ͯΔ DVSTPS DVSTPS

Slide 9

Slide 9 text

ImageFlux のバイナリ処理 (4/4)〜 bufio • bufio を使うと Peek メソッドが使える • Peek は既読データを消さない？？ JPEG PNG GIF ？？ JPEG decoder 1FFLͳͷͰಡΜ ͩ෼͕ফ͑ͳ͍ SFBEFSCVGJP/FX3FBEFS S Ͱ 1FFL͕࢖͑Δ DVSTPS DVSTPS

Slide 10

Slide 10 text

画像バイナリについて〜ここから本題 • 画像コンテナ • ⽣RGBデータ • メタ情報、複数画像 • コンテナ構造の類型 • 画像バイナリの情報要素を実際に読む • 画像形式の区別 • GIF, JPEG, PNG, WebP

Slide 11

Slide 11 text

画像コンテナ (1/4) • 画像⾃体はただの RGB配列 (印刷⽤だと CMYK) TIBEPXNBTL BQBUVSF HSJMM TMPUNBTL 3FUJOBҎલͷϞχλ͸ ໨Λ͚ۙͮΕ͹υοτ ͕ͻͱͭͻͱͭݟ͑ͨ $35Ϟχλ ϒϥ΢ϯ؅ ͷྫͰ͝ΊΜͳ͍͞

Slide 12

Slide 12 text

画像コンテナ(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

Slide 13

Slide 13 text

画像コンテナ (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

Slide 14

Slide 14 text

画像コンテナ (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

Slide 15

Slide 15 text

画像コンテナ類型 (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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

画像コンテナ類型 (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

Slide 18

Slide 18 text

画像コンテナ類型 (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

Slide 19

Slide 19 text

画像コンテナ類型 (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

Slide 20

Slide 20 text

画像バイナリを直接読む (1/12) • どうやって読むか？ (例) • macOS なら 0xED • Windows なら Stirling, Bz • UNIX なら hexdump, xxd • もしくは⾃作でも

Slide 21

Slide 21 text

画像バイナリを直接読む (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

Slide 22

Slide 22 text

画像を直接読む (3/12) 〜 GIF (1/2) • https://www.w3.org/Graphics/GIF/spec-gif89a.txt • Signature のすぐ後ろにある signature width height

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

画像を直接読む (5/12) 〜 JPEG (1/2) • https://www.w3.org/Graphics/JPEG/jfif3.pdf SOI APP0 SOFx … SOFx Size marker P Y X XJEUI IFJHIU …

Slide 25

Slide 25 text

画像を直接読む (6/12) 〜 JPEG (2/2) • ffc? (SOFx チャンク) を探す

Slide 26

Slide 26 text

画像を直接読む (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

Slide 27

Slide 27 text

画像を直接読む (8/12) 〜 PNG (1/3) • 決まった場所にある

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

画像を直接読む (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 …

Slide 30

Slide 30 text

画像を直接読む (11/12) 〜 WebP (2/3) • RIFF で包んだ VP8 ストリームから探す