最近在看隐写术的时候经常需要研究图片文件的二进制文档格式,那么这就很有必要了解我们的图片文件究竟是如何保存的了,今天找了个时间看了下png文件的文档格式。总体还是挺麻烦的,不过毕竟不需要有什么要求,能了解即可。
PNG是20世纪90年代中期开始开发的图像文件存储格式,其目的是替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format,PNG)名称来源于非官方的“PNG's Not GIF”,是一种位图文件(bitmap file)存储格式,读成“ping”。PNG用来存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位,并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法。(说白了这就是一种方便的、适于网络传播的轻便图片文件格式)
PNG图像格式文件由文件署名和数据块(chunk)组成。
8字节的PNG文件署名域用来识别该文件是不是PNG文件。该域的值是:
十进制数 | 十六进制数 |
---|---|
137 | 89 |
80 | 50 |
78 | 4e |
71 | 47 |
13 | 0d |
10 | 0a |
26 | 1a |
10 | 0a |
这个文件署名就是在《利用文件头标志判断文件类型》中提到的文件头标志了,很简单。
这里有两种类型的数据块,一种是称为关键数据块(critical chunk),就是必须要有的块;另一种叫做辅助数据块(ancillary chunks)。
每个数据块都由下表所示的的4个域组成。
名称 | 字节数 | 说明 |
---|---|---|
Length(长度) | 4字节 | 指定数据块中数据域的长度,其长度不超过$(2^{31}-1)$字节 |
Chunk Type Code(数据块类型码) | 4字节 | 数据块类型码由ASCII字母(A-Z和a-z)组成 |
Chunk Data(数据块实际内容 | 可变长度 | 存储按照Chunk Type Code指定的数据 |
CRC(循环冗余检测 | 4字节 | 存储用来检测是否有错误的循环冗余码 |
其中CRC(cyclic redundancy check)域中的值是对Chunk Type Code域和Chunk Data域中的数据进行计算得到的,可以看做一种校验码。
关键数据块中的4个标准数据块是:
它包含有PNG文件中存储的图像数据的基本信息,并要作为第一个数据块出现在PNG数据流中,而且一个PNG数据流中只能有一个文件头数据块。
文件头数据块由13字节,组成结构如下:
域的名称 | 字节数 | 说明 |
---|---|---|
Width | 4 bytes | 图像宽度,以像素为单位 |
Height | 4 bytes | 图像高度,以像素为单位 |
Bit depth | 1 byte | 图像深度:索引彩色图像:1,2,4或8 ;灰度图像:1,2,4,8或16 ;真彩色图像:8或16 |
ColorType | 1 byte | 颜色类型:0:灰度图像, 1,2,4,8或16;2:真彩色图像,8或16;3:索引彩色图像,1,2,4或84:带α通道数据的灰度图像,8或16;6:带α通道数据的真彩色图像,8或16 |
Compression method | 1 byte | 压缩方法(LZ77派生算法) |
Filter method | 1 byte | 滤波器方法 |
Interlace method | 1 byte | 隔行扫描方法:0:非隔行扫描;1: Adam7(由Adam M. Costello开发的7遍隔行扫描方法) |
它包含有与索引彩色图像((indexed-color image))相关的彩色变换数据,它仅与索引彩色图像有关,而且要放在图像数据块(image data chunk)之前。真彩色的PNG数据流也可以有调色板数据块,目的是便于非真彩色显示程序用它来量化图像数据,从而显示该图像。结构如下:
颜色 | 字节 | 意义 |
---|---|---|
Red | 1 byte | 0 = 黑色, 255 = 红 |
Green | 1 byte | 0 = 黑色, 255 = 绿色 |
Blue | 1 byte | 0 = 黑色, 255 = 蓝色 |
PLTE数据块是定义图像的调色板信息,PLTE可以包含1~256个调色板信息,每一个调色板信息由3个字节组成,因此调色板数据块所包含的最大字节数为768,调色板的长度应该是3的倍数,否则,这将是一个非法的调色板。
对于索引图像,调色板信息是必须的,调色板的颜色索引从0开始编号,然后是1、2……,调色板的颜色数不能超过色深中规定的颜色数(如图像色深为4的时候,调色板中的颜色数不可以超过2^4=16),否则,这将导致PNG图像不合法。
它存储实际的数据,在数据流中可包含多个连续顺序的图像数据块。
IDAT存放着图像真正的数据信息,因此,如果能够了解IDAT的结构,我们就可以很方便的生成PNG图像。
它用来标记PNG文件或者数据流已经结束,并且必须要放在文件的尾部。
如果我们仔细观察PNG文件,我们会发现,文件的结尾12个字符看起来总应该是这样的:
00 00 00 00 49 45 4E 44 AE 42 60 82
不难明白,由于数据块结构的定义,IEND数据块的长度总是0(00 00 00 00,除非人为加入信息),数据标识总是IEND(49 45 4E 44),因此,CRC码也总是AE 42 60 82。
最后,除了表示数据块开始的IHDR必须放在最前面, 表示PNG文件结束的IEND数据块放在最后面之外,其他数据块的存放顺序没有限制。
(比较杂,不需要全部了解透)
PNG文件格式规范制定的10个辅助数据块是:
关键数据块、辅助数据块和专用公共数据块(special-purpose public chunks)综合下表中:
数据块符号 | 数据块名称 | 多数据块 | 可选否 | 位置限制 |
---|---|---|---|---|
IHDR | 文件头数据块 | 否 | 否 | 第一块 |
cHRM | 基色和白色点数据块 | 否 | 是 | 在PLTE和IDAT之前 |
gAMA | 图像γ数据块 | 否 | 是 | 在PLTE和IDAT之前 |
sBIT | 样本有效位数据块 | 否 | 是 | 在PLTE和IDAT之前 |
PLTE | 调色板数据块 | 否 | 是 | 在IDAT之前 |
bKGD | 背景颜色数据块 | 否 | 是 | 在PLTE之后IDAT之前 |
hIST | 图像直方图数据块 | 否 | 是 | 在PLTE之后IDAT之前 |
tRNS | 图像透明数据块 | 否 | 是 | 在PLTE之后IDAT之前 |
oFFs | (专用公共数据块) | 否 | 是 | 在IDAT之前 |
pHYs | 物理像素尺寸数据块 | 否 | 是 | 在IDAT之前 |
sCAL | (专用公共数据块) | 否 | 是 | 在IDAT之前 |
IDAT | 图像数据块 | 是 | 否 | 与其他IDAT连续 |
tIME | 图像最后修改时间数据块 | 否 | 是 | 无限制 |
tEXt | 文本信息数据块 | 是 | 是 | 无限制 |
zTXt | 压缩文本数据块 | 是 | 是 | 无限制 |
fRAc | (专用公共数据块) | 是 | 是 | 无限制 |
gIFg | (专用公共数据块) | 是 | 是 | 无限制 |
gIFt | (专用公共数据块) | 是 | 是 | 无限制 |
gIFx | (专用公共数据块) | 是 | 是 | 无限制 |
IEND | 图像结束数据 | 否 | 否 | 最后一个数据块 |
tEXt和zTXt数据块中的标准关键字:
关键字 | 说明 |
---|---|
Title | 图像名称或者标题 |
Author | 图像作者名 |
Description | 图像说明 |
Copyright | 版权声明 |
CreationTime | 原图创作时间 |
Software | 创作图像使用的软件 |
Disclaimer | 弃权 |
Warning | 图像内容警告 |
Source | 创作图像使用的设备 |
Comment | 各种注释 |
为了便于研究,我在本地找了个24x24像素的图片:
用十六进制打开后是这样的:
0000000: 8950 4e47 0d0a 1a0a 0000 000d 4948 4452 .PNG........IHDR
0000010: 0000 0018 0000 0018 0806 0000 00e0 773d ..............w=
0000020: f800 0000 1974 4558 7453 6f66 7477 6172 .....tEXtSoftwar
0000030: 6500 4164 6f62 6520 496d 6167 6552 6561 e.Adobe ImageRea
0000040: 6479 71c9 653c 0000 0344 4944 4154 78da dyq.e<...DIDATx.
0000050: b454 4b48 5b51 10bd 792f 2646 a346 7411 .TKH[Q..y/&F.Ft.
0000060: 450b cac3 6840 8c14 0242 8542 e9aa ab42 E...h@...B.B...B
0000070: 5785 8614 c428 b4d0 5569 b108 5dbb 29b4 W....(..Ui..].).
0000080: 1b05 a5ab 6cb3 2a14 0ab5 8b42 75a3 d188 ....l.*....Bu...
0000090: 82c6 0ff1 4320 a2e2 2f7e 12ed 9c47 e671 ....C ../~...G.q
00000a0: 8d2f 8950 3a30 dcc7 bb33 67e6 cee7 5826 ./.P:0...3g...X&
00000b0: 2626 8499 288a a2ab d56a d555 55d5 57d7 &&..(....j.UU.W.
00000c0: d7d7 be6c 36fb fef2 f232 45a7 b8ba ba12 ...l6....2E.....
00000d0: c160 5014 13ab d94f 8bc5 72e3 24e0 1e9f .`P....O..r.$...
00000e0: cff7 b9ae ae4e 4c4e 4eda 3299 4c00 777c .....NLNN.2.L.w|
00000f0: 5f4c 1472 16f9 9a07 2e6a 6b6b 875a 5b5b _L.r.....jkk.Z[[
0000100: 454d 4d8d e8ea ea7a 4eff 3ce2 8ea2 3018 EMM....zN.<...0.
0000110: 94cb c28a 7f04 765f d3b4 27ec d0d8 d8a8 ......v_..'.....
0000120: 5655 55bd 639b 9201 a8b6 a8af 516b 9bcd VUU.c.......Qk..
0000130: 26ca caca f46f 0020 7bb7 db6d 38d8 ed76 &....o. {..m8..v
0000140: d1d1 d1f1 82ee 34d8 940c 0023 00c2 11e0 ......4....#....
0000150: 1c20 975d 2781 3d75 381c 379c 9a9b 9b55 . .]'.=u8.7....U
0000160: 2ad7 1012 bb73 0028 c073 1373 8f02 3c68 *....s.(.s.s..<h
0000170: 6b6b fb44 25b9 e554 5e5e 2eba bbbb f18a kk.D%..T^^......
0000180: c791 4844 2b16 c012 0e87 fd04 faac bebe ..HD+...........
0000190: be85 cad1 e272 b97c 04a0 e245 4ea7 530f .....r.|...EN.S.
00001a0: 5c48 8e8f 8f45 3a9d d6f5 f0f0 7091 747b \H...E:.....p.t{
00001b0: 7777 779d feff a649 0b07 0281 acb5 baba www....I........
00001c0: fa97 dfef 7710 7041 309e 2c79 ba20 4800 ....w.pA0.,y. H.
00001d0: 9a13 2f81 7a11 7479 79b9 3f16 8ba1 ae63 ../.z.tyy.?....c
00001e0: caf9 f979 120b 83c5 81e6 03e3 8e4f 59e5 ...y.........OY.
00001f0: a010 5e3c f405 2705 dbd6 7b90 4aa5 1ecd ..^<..'...{.J...
0000200: cdcd 250e 0e0e c4c5 c585 a080 fa49 0686 ..%..........I..
0000210: 1303 ca81 7007 1bf6 c1f7 d9d9 9958 5b5b ....p........X[[
0000220: 1384 f73a 140a 7de3 3d58 27e9 8d46 a371 ...:..}.=X'..F.q
0000230: 0491 c14a 89fc 1204 01f8 d4d4 1461 87be ...J.........a..
0000240: e46f 7262 6363 a377 6666 6671 6f6f cfc8 .orbcc.wfffqoo..
0000250: dc6c cb65 651b 3439 1e8f 03bc 8fc0 c70a .l.ee.49........
0000260: 5145 3291 483c 5c58 5888 a251 a5c0 5989 QE2.H<\XX..Q..Y.
0000270: f8c4 d6d6 5676 7a7a fae5 c0c0 c0f8 ad3d ....Vvzz.......=
0000280: c823 ac14 3df3 c3d1 d191 d1e4 620a 5f94 .#..=.......b._.
0000290: 6673 7333 3238 38f8 b520 9be6 3887 ff79 fss3288.. ..8..y
00002a0: 989b f85f 7e3f e4a4 b0f1 74af 1525 3b36 ..._~?....t..%;6
00002b0: 8423 ed45 6745 4585 012c 4f92 3c41 fc02 .#.EgEE..,O.<A..
00002c0: d008 ed90 7774 74d4 5694 4df9 248e f182 ....wtt.V.M.$...
00002d0: 3278 4ccd 9aca 8161 039f caca 4a80 9b52 2xL....a....J..R
00002e0: b855 1e49 3a55 32f6 c209 60bc 4068 3aa6 .U.I:U2...`.@h:.
00002f0: 8b1a 9aa6 041c 4429 3a6f 7150 3000 9d9d ......D):oqP0...
0000300: 641e 33ed 8114 a485 0238 4178 703c 3939 d.3......8Axp<99
0000310: 11c9 6452 acac acfc 248e 798b 9d21 b0e1 ..dR....$.y..!..
0000320: f6f6 f6fe a6a6 2683 5ec0 5b94 948f eec3 ......&.^.[.....
0000330: 055f c001 3015 5838 64bc baba 1add d9d9 ._..0.X8d.......
0000340: 01f0 0f76 a0cd 7d33 3f3f 3f42 73ff d1e3 ...v..}3???Bs...
0000350: f104 1b1a 1a54 f890 6805 a748 9a92 3fb4 .....T..h..H..?.
0000360: e6df 691f dcfb fbfb 2366 19e5 64fb f4f4 ..i.....#f..d...
0000370: b46f 7676 7664 6969 6998 5ed1 43fd 1837 .ovvvdiii.^.C..7
0000380: a5eb bb50 c2bf 8822 feb3 fc15 6000 74fe ...P..."....`.t.
0000390: 7622 c159 82da 0000 0000 4945 4e44 ae42 v".Y......IEND.B
00003a0: 6082 0a `..
接下来我们试着分析一下:
首先是八个字节的文件头标志,标识着png文件:
8950 4e47 0d0a 1a0a
接下来的地方就是IHDR数据块了:
0000 000d
说明IHDR头块长为13
4948 4452
IHDR标识(ascii码为IHDR)
下面是IHDR数据块的实际内容
0000 0018
图像的宽,24像素
0000 0018
图像的高,24像素
08
表示色深,这里是2^8=256,即这是一个256色的图像
06
颜色类型,查表可知这是带α通道数据的真彩色图像
00
PNG Spec规定此处总为0(非0值为将来使用更好的压缩方法预留),表示使压缩方法(LZ77派生算法)
00
同上
00
非隔行扫描
e0 773d f8
CRC校验
以上分析了第一个IHDR块的内容,其他块的分析方法类似,比如接下来的就是tEXt块了,很简单,不做分析了。(当然这里还有重要的IDAT块,这是图像的实际内容)
最后得有个IEND数据块,这部分正如上所说,通常都应该是
00 00 00 00 49 45 4E 44 AE 42 60 82
由于我用的是vim打开,vim在文件最后都会恶心的自己加上0a换行,当然这并没有什么坏的影响。不过这也提醒了我们一个问题,既然在IEND块后面添加任何的字符都对文件的打开造成不了影响,那我们就可以在这里藏一些数据了(当然这种藏法很low)。。。
OK,这就是png文件的基本构造了。
用二进制查看工具展示信息还是太 low 了,我们其实有个更方便的工具,就是 pngcheck。可以直接从图片中抽取出一些感兴趣的信息,尤其是 tEXt 区的数据。利用好 tEXt 区我们可以做很多事情。比如近期比较火的 excalidraw 工具,就是通过往 tEXt 里写入结构化信息,从而做到将画布信息保存在 png 中方便重新加载。
$ pngcheck -7cpqstvx a.png
Scanning: a.png
a-1.png: contains a.png PNG 1
File: a-1
chunk IHDR at offset 0x0000c, length 13
24 x 24 image, 32-bit RGB+alpha, non-interlaced
chunk tEXt at offset 0x00025, length 25, keyword: Software
Adobe ImageReady
chunk IDAT at offset 0x0004a, length 836
zlib: deflated, 32K window, maximum compression
chunk IEND at offset 0x0039a, length 0
No errors detected in a-1 (4 chunks, 154270133.1% compression).
如果需要使用 nodejs 对指定区进行修改和提取,则可以利用 png-chunks-encode 和 png-chunks-extract 工具对。