png画像のバイナリを確認

png画像のバイナリから、どういったデータ構造になっているのか確認します。確認方法としては、 xxdコマンド を利用した方法と node.js を利用した方法をとりあげます。

imagemagickで画像生成

まず、確認用のpng画像を生成します。imagemagickを利用してpng画像を生成します。

brew install imagemagick
$ magick -version
Version: ImageMagick 7.0.10-19 Q16 x86_64 2020-06-12 https://imagemagick.org
Copyright: © 1999-2020 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC HDRI Modules OpenMP(3.1) 
Delegates (built-in): bzlib freetype gslib heic jng jp2 jpeg lcms lqr ltdl lzma openexr png ps tiff webp xml zlib
magick -size 10x10 xc:#000000 test.png

縦横10pxの画像が生成されました。

741-test.png

xddコマンドでバイナリ確認

生成したファイルのバイナリを確認します。バイナリのエンコーディングタイプを16進数にして確認したいので xddコマンド を利用します。

741-xxd.png

出力結果です。ファイルの内容が16進数で出力されています。

右端のASCIIコードで画像情報が読み取れます。ASCIIコードの対応文字がない場合、. で表示されてます。

チャンクについて

最初の8バイト( 8950 4e47 0d0a 1a0a )がシグネチャになっています。その後、 チャンク というデータ構成が続きます。チャンク は以下のデータ構成で作られています。

type byte description
length 4 data部分のバイト数
type 4 チャンクの種類
data lengthで指定された長さ チャンクデータ
CRC 4 データの破損をチェック

今回確認した画像のチャンクは以下のようになります。

length type data CRC
0000 000d 4948 4452
(IHDR)
0000 000a 0000 000a 0100 0000 00 a5 49f2 10
00 0000 04 67 414d 41
(gAMA)
00 00b1 8f 0b fc61 05
00 0000 20 63 4852 4d
(cHRM)
00 007a 2600 0080 8400 00fa 0000 0080 e800 0075 3000 00ea 6000 003a 9800 0017 70 9c ba51 3c
00 0000 02 62 4b47 44
(bKGD)
00 01 dd 8a13 a4
00 0000 07 74 494d 45
(tIME)
07 e406 1417 2601 bc8a c01b
0000 000b 4944 4154
(IDAT)
08d7 6360 c007 0000 1e00 01 6e 8547 32
00 0000 25 74 4558 74
(tEXt)
省略 359a 7804
00 0000 25 74 4558 74
(tEXt)
省略 44 c7c0 b8
00 0000 00 49 454e 44
(IEND)
ae 4260 82

node.jsでバイナリ確認

node.js では Bufferクラス でバイナリデータを扱えます。

fsモジュールreadFileSync を利用すると、指定ファイルのバイナリをもとに Bufferクラス のインスタンスを取得できます。

const fs = require('fs')

const buffer = fs.readFileSync('./test.png')
console.log(buffer)
console.log(buffer.buffer)
console.log(buffer.byteLength)
console.log(buffer.byteOffset)
$ node app.js 
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 00 0a 00 00 00 0a 01 00 00 00 00 a5 49 f2 10 00 00 00 04 67 41 4d 41 00 00 b1 8f 0b fc 61 05 00 ... 209 more bytes>
ArrayBuffer {
  [Uint8Contents]: <63 6f 6e 73 74 20 66 73 20 3d 20 72 65 71 75 69 72 65 28 27 66 73 27 29 0a 0a 63 6f 6e 73 74 20 62 75 66 66 65 72 20 3d 20 66 73 2e 72 65 61 64 46 69 6c 65 53 79 6e 63 28 27 2e 2f 74 65 73 74 2e 70 6e 67 27 29 0a 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 62 75 66 66 65 72 29 0a 63 6f 6e 73 6f 6c 65 2e 6c ... 8092 more bytes>,
  byteLength: 8192
}
259
528

toStringメソッド でバイナリのエンコーディングタイプを指定して出力することができます。

const fs = require('fs')

const buffer = fs.readFileSync('./test.png')
console.log(buffer.toString('ascii'))
$ node app.js 
        PNG

IHDR

%IrgAMA1
        |a cHRMz&zhu0j`:p:Q<bKGD]
$tIMEd&<
@
 IDAWc`@nG2%tEXtdate:create2020-06-20T23:38:01+00:005x%tEXtdate:modify2020-06-20T23:38:01+00:00DG@8IEND.B`

readFileSync で取得する際、以下のようにバイナリのエンコーディングタイプを指定すると文字列として取得できます。

const fs = require('fs')

console.log('base64')
console.log(fs.readFileSync('./test.png', 'base64'))

console.log()

console.log('hex(16進数)')
console.log(fs.readFileSync('./test.png', 'hex'))
$ node app.js 
base64
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQAAAAClSfIQAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAd2KE6QAAAAHdElNRQfkBhQXJgG8isAbAAAAC0lEQVQI12NgwAcAAB4AAW6FRzIAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDYtMjBUMjM6Mzg6MDErMDA6MDA1mngEAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTA2LTIwVDIzOjM4OjAxKzAwOjAwRMfAuAAAAABJRU5ErkJggg==

hex(16進数)
89504e470d0a1a0a0000000d494844520000000a0000000a0100000000a549f2100000000467414d410000b18f0bfc6105000000206348524d00007a26000080840000fa00000080e8000075300000ea6000003a98000017709cba513c00000002624b47440001dd8a13a40000000774494d4507e40614172601bc8ac01b0000000b4944415408d76360c00700001e00016e8547320000002574455874646174653a63726561746500323032302d30362d32305432333a33383a30312b30303a3030359a78040000002574455874646174653a6d6f6469667900323032302d30362d32305432333a33383a30312b30303a303044c7c0b80000000049454e44ae426082

参考