diff options
Diffstat (limited to 'vhosts/blog/content/posts/2023-04-01')
| -rw-r--r-- | vhosts/blog/content/posts/2023-04-01/implementation-of-minimal-png-image-encoder.ndoc (renamed from vhosts/blog/content/posts/2023-04-01/implementation-of-minimal-png-image-encoder.xml) | 391 |
1 files changed, 194 insertions, 197 deletions
diff --git a/vhosts/blog/content/posts/2023-04-01/implementation-of-minimal-png-image-encoder.xml b/vhosts/blog/content/posts/2023-04-01/implementation-of-minimal-png-image-encoder.ndoc index 67dfad87..2e288137 100644 --- a/vhosts/blog/content/posts/2023-04-01/implementation-of-minimal-png-image-encoder.xml +++ b/vhosts/blog/content/posts/2023-04-01/implementation-of-minimal-png-image-encoder.ndoc @@ -1,51 +1,48 @@ -<?xml version="1.0" encoding="UTF-8"?> -<article xmlns="http://docbook.org/ns/docbook" xmlns:xl="http://www.w3.org/1999/xlink" version="5.0"> - <info> - <title>PNG 画像の最小構成エンコーダを実装する</title> - <abstract> - PNG 画像として valid な範囲で最大限手抜きしたエンコーダを書く。 - </abstract> - <revhistory> - <revision> - <date>2023-04-01</date> - <revremark>公開</revremark> - </revision> - </revhistory> - </info> - <section xml:id="intro"> - <title>はじめに</title> - <para> +--- +[article] +title = "PNG 画像の最小構成エンコーダを実装する" +description = "PNG 画像として valid な範囲で最大限手抜きしたエンコーダを書く。" +tags = [] + +[[article.revisions]] +date = "2023-04-01" +remark = "公開" +--- +<article> + <section id="intro"> + <h>はじめに</h> + <p> この記事では、PNG 画像として valid な範囲で最大限手抜きしたエンコーダを書く。 PNG 画像に対応したビューアであれば読み込めるが、圧縮効率については一切考えない。 また、実装には Go 言語を使うが、Go の標準ライブラリにあるさまざまなアルゴリズム (PNG 画像に関係する範囲だと、zlib や CRC32、Adler-32 など) は使わない。 - </para> + </p> </section> - <section xml:id="basic-structure-of-png"> - <title>PNG ファイルの基本構造</title> - <para> + <section id="basic-structure-of-png"> + <h>PNG ファイルの基本構造</h> + <p> PNG ファイルの基本構造は次のようになっている。 - </para> - <orderedlist> - <listitem>PNG signature</listitem> - <listitem>IHDR chunk</listitem> - <listitem>任意個の chunk</listitem> - <listitem>IEND chunk</listitem> - </orderedlist> - <para> + </p> + <ol> + <li>PNG signature</li> + <li>IHDR chunk</li> + <li>任意個の chunk</li> + <li>IEND chunk</li> + </ol> + <p> Chunk には画像データを入れる IDAT chunk、パレットデータを入れる PLTE chunk、テキストデータを入れる tEXt chunk などがあるが、 今回は最小構成ということで IDAT chunk (と IHDR chunk と IEND chunk) のみを用いる。 - </para> - <para> + </p> + <p> 次節で、それぞれの具体的な構造を確認しつつ実装していく。 - </para> + </p> </section> - <section xml:id="implement-png-encoder"> - <title>PNG のエンコーダを実装する</title> - <para> + <section id="implement-png-encoder"> + <h>PNG のエンコーダを実装する</h> + <p> 以下のソースコードをベースにする。 - 今回 PNG のデコーダは扱わないので、読み込みには Go の標準ライブラリ <literal>image/png</literal> を用いる。 - </para> - <programlisting language="go" linenumbering="unnumbered"> + 今回 PNG のデコーダは扱わないので、読み込みには Go の標準ライブラリ <code>image/png</code> を用いる。 + </p> + <codeblock language="go"> <![CDATA[ package main @@ -86,32 +83,32 @@ writeChunkIend(w) } ]]> - </programlisting> - <para> - 以降は、<literal>writeSignature</literal> や <literal>writeChunkIhdr</literal> などを実装していく。 - </para> - <section xml:id="implement-png-encoder--png-signature"> - <title>PNG signature</title> - <para> + </codeblock> + <p> + 以降は、<code>writeSignature</code> や <code>writeChunkIhdr</code> などを実装していく。 + </p> + <section id="implement-png-encoder--png-signature"> + <h>PNG signature</h> + <p> PNG signature は、PNG 画像の先頭に固定で付与されるバイト列で、8 バイトからなる。 - </para> - <orderedlist> - <listitem>0x89</listitem> - <listitem>0x50 (ASCII コードで「P」)</listitem> - <listitem>0x4E (ASCII コードで「N」)</listitem> - <listitem>0x47 (ASCII コードで「G」)</listitem> - <listitem>0x0D (ASCII コードで CR)</listitem> - <listitem>0x0A (ASCII コードで LF)</listitem> - <listitem>0x1A (ASCII コードで EOF)</listitem> - <listitem>0x0A (ASCII コードで LF)</listitem> - </orderedlist> - <para> + </p> + <ol> + <li>0x89</li> + <li>0x50 (ASCII コードで「P」)</li> + <li>0x4E (ASCII コードで「N」)</li> + <li>0x47 (ASCII コードで「G」)</li> + <li>0x0D (ASCII コードで CR)</li> + <li>0x0A (ASCII コードで LF)</li> + <li>0x1A (ASCII コードで EOF)</li> + <li>0x0A (ASCII コードで LF)</li> + </ol> + <p> CRLF や LF は、送信中に改行コードの変換が誤っておこなわれていないかどうかを検知するのに使われる。 - </para> - <para> - <literal>writeSignature</literal> の実装はこちら: - </para> - <programlisting language="go" linenumbering="unnumbered"> + </p> + <p> + <code>writeSignature</code> の実装はこちら: + </p> + <codeblock language="go"> <![CDATA[ import "encoding/binary" @@ -129,26 +126,26 @@ binary.Write(w, binary.BigEndian, sig) } ]]> - </programlisting> - <para> - <literal>encoding/binary</literal> パッケージの <literal>binary.Write</literal> を使い、固定の 8 バイトを書き込む。 - </para> + </codeblock> + <p> + <code>encoding/binary</code> パッケージの <code>binary.Write</code> を使い、固定の 8 バイトを書き込む。 + </p> </section> - <section xml:id="implement-png-encoder--structure-of-chunk"> - <title>Chunk の構造</title> - <para> + <section id="implement-png-encoder--structure-of-chunk"> + <h>Chunk の構造</h> + <p> IHDR chunk に進む前に、chunk 一般の構造を確認する。 - </para> - <orderedlist> - <listitem>Length: chunk data のバイト長 (符号なし 4 バイト整数)</listitem> - <listitem>Chunk type: chunk の種類を示す 4 バイトからなる名前</listitem> - <listitem>Chunk data: 実際のデータ。0 バイトでもよい</listitem> - <listitem>CRC: chunk type と chunk data の CRC (符号なし 4 バイト整数)</listitem> - </orderedlist> - <para> - CRC (Cyclic Redundancy Check) は誤り検出符号の一種。Go 言語では <literal>hash/crc32</literal> パッケージにあるが、今回はこれも自前で実装する。PNG の仕様書に C 言語のサンプルコードが載っている (<link xl:href="https://www.w3.org/TR/png/#D-CRCAppendix">D. Sample CRC implementation</link>) ので、これを Go に移植する。 - </para> - <programlisting language="go" linenumbering="unnumbered"> + </p> + <ol> + <li>Length: chunk data のバイト長 (符号なし 4 バイト整数)</li> + <li>Chunk type: chunk の種類を示す 4 バイトからなる名前</li> + <li>Chunk data: 実際のデータ。0 バイトでもよい</li> + <li>CRC: chunk type と chunk data の CRC (符号なし 4 バイト整数)</li> + </ol> + <p> + CRC (Cyclic Redundancy Check) は誤り検出符号の一種。Go 言語では <code>hash/crc32</code> パッケージにあるが、今回はこれも自前で実装する。PNG の仕様書に C 言語のサンプルコードが載っている (<a href="https://www.w3.org/TR/png/#D-CRCAppendix">D. Sample CRC implementation</a>) ので、これを Go に移植する。 + </p> + <codeblock language="go"> <![CDATA[ var ( crcTable [256]uint32 @@ -186,11 +183,11 @@ return updateCrc(0xFFFFFFFF, buf) ^ 0xFFFFFFFF } ]]> - </programlisting> - <para> - できた <literal>crc</literal> 関数を使って、chunk 一般を書き込む関数も用意しておこう。 - </para> - <programlisting language="go" linenumbering="unnumbered"> + </codeblock> + <p> + できた <code>crc</code> 関数を使って、chunk 一般を書き込む関数も用意しておこう。 + </p> + <codeblock language="go"> <![CDATA[ func writeChunk(w io.Writer, chunkType string, data []byte) { typeAndData := make([]byte, 0, len(chunkType)+len(data)) @@ -202,62 +199,62 @@ binary.Write(w, binary.BigEndian, crc(typeAndData)) } ]]> - </programlisting> - <para> - 仕様どおり、<literal>chunkType</literal> と <literal>data</literal> から CRC を計算し、<literal>data</literal> の長さと合わせて書き込んでいる。 + </codeblock> + <p> + 仕様どおり、<code>chunkType</code> と <code>data</code> から CRC を計算し、<code>data</code> の長さと合わせて書き込んでいる。 PNG では基本的に big endian を使うことに注意する。 - </para> - <para> + </p> + <p> 準備ができたところで、具体的な chunk をエンコードしていく。 - </para> + </p> </section> - <section xml:id="implement-png-encoder--ihdr-chunk"> - <title>IHDR chunk</title> - <para> + <section id="implement-png-encoder--ihdr-chunk"> + <h>IHDR chunk</h> + <p> IHDR chunk は最初に配置される chunk である。次のようなデータからなる。 - </para> - <orderedlist> - <listitem>画像の幅 (符号なし 4 バイト整数)</listitem> - <listitem>画像の高さ (符号なし 4 バイト整数)</listitem> - <listitem> + </p> + <ol> + <li>画像の幅 (符号なし 4 バイト整数)</li> + <li>画像の高さ (符号なし 4 バイト整数)</li> + <li> ビット深度 (符号なし 1 バイト整数) - <itemizedlist> - <listitem>1 色に使うビット数。1 ピクセルに 24 bit 使う truecolor 画像では 8 になる</listitem> - </itemizedlist> - </listitem> - <listitem> + <ul> + <li>1 色に使うビット数。1 ピクセルに 24 bit 使う truecolor 画像では 8 になる</li> + </ul> + </li> + <li> 色タイプ (符号なし 1 バイト整数) - <itemizedlist> - <listitem>0: グレースケール</listitem> - <listitem>2: Truecolor (今回はこれに決め打ち)</listitem> - <listitem>3: パレットのインデックス</listitem> - <listitem>4: グレースケール + アルファ</listitem> - <listitem>6: Truecolor + アルファ</listitem> - </itemizedlist> - </listitem> - <listitem> + <ul> + <li>0: グレースケール</li> + <li>2: Truecolor (今回はこれに決め打ち)</li> + <li>3: パレットのインデックス</li> + <li>4: グレースケール + アルファ</li> + <li>6: Truecolor + アルファ</li> + </ul> + </li> + <li> 圧縮方式 (符号なし 1 バイト整数) - <itemizedlist> + <ul> PNG の仕様書に 0 しか定義されていないので 0 で固定 - </itemizedlist> - </listitem> - <listitem> + </ul> + </li> + <li> フィルタ方式 (符号なし 1 バイト整数) - <itemizedlist> + <ul> PNG の仕様書に 0 しか定義されていないので 0 で固定 - </itemizedlist> - </listitem> - <listitem> + </ul> + </li> + <li> インターレース方式 (符号なし 1 バイト整数) - <itemizedlist> + <ul> 今回はインターレースしないので 0 - </itemizedlist> - </listitem> - </orderedlist> - <para> + </ul> + </li> + </ol> + <p> 今回ほとんどのデータは決め打ちするので、データに応じて変わるのは width と height だけになる。コードは次のようになる。 - </para> - <programlisting language="go" linenumbering="unnumbered"> + </p> + <codeblock language="go"> <![CDATA[ import "bytes" @@ -274,31 +271,31 @@ writeChunk(w, "IHDR", buf.Bytes()) } ]]> - </programlisting> + </codeblock> </section> - <section xml:id="implement-png-encoder--idat-chunk"> - <title>IDAT chunk</title> - <para> + <section id="implement-png-encoder--idat-chunk"> + <h>IDAT chunk</h> + <p> IDAT chunk は、実際の画像データが格納された chunk である。IDAT chunk は deflate アルゴリズムにより圧縮され、zlib 形式で格納される。 - </para> - <section xml:id="implement-png-encoder--idat-chunk--zlib"> - <title>Zlib</title> - <para> + </p> + <section id="implement-png-encoder--idat-chunk--zlib"> + <h>Zlib</h> + <p> まずは zlib について確認する。おおよそ次のような構造になっている。 - </para> - <orderedlist> - <listitem>固定で 0x78 (符号なし 1 バイト整数)</listitem> - <listitem>固定で 0x01 (符号なし 1 バイト整数)</listitem> - <listitem>データ</listitem> - <listitem>データの Adler-32</listitem> - </orderedlist> - <para> + </p> + <ol> + <li>固定で 0x78 (符号なし 1 バイト整数)</li> + <li>固定で 0x01 (符号なし 1 バイト整数)</li> + <li>データ</li> + <li>データの Adler-32</li> + </ol> + <p> 最初の 2 バイトにも意味はあるが、PNG では固定で構わない。 - </para> - <para> - Adler-32 も CRC と同じく誤り検出符号である。こちらも zlib の仕様書に C 言語でサンプルコードが記載されている (<link xl:href="https://www.rfc-editor.org/rfc/rfc1950#section-9">9. Appendix: Sample code</link>) ので、Go に移植する。 - </para> - <programlisting language="go" linenumbering="unnumbered"> + </p> + <p> + Adler-32 も CRC と同じく誤り検出符号である。こちらも zlib の仕様書に C 言語でサンプルコードが記載されている (<a href="https://www.rfc-editor.org/rfc/rfc1950#section-9">9. Appendix: Sample code</a>) ので、Go に移植する。 + </p> + <codeblock language="go"> <![CDATA[ const adler32Base = 65521 @@ -317,23 +314,23 @@ return updateAdler32(1, buf) } ]]> - </programlisting> - <para> + </codeblock> + <p> 「データ」の部分には圧縮したデータが入るのだが、真面目に deflate アルゴリズムを実装する必要はない。Zlib には無圧縮のデータブロックを格納することができるので、これを使う。本来は、データの圧縮効率の悪いランダムなデータをそのまま格納するためのものだが、今回は deflate の実装をサボるために使う。 - </para> - <para> - 1 つの無圧縮ブロックには 65535 (2<superscript>16</superscript> - 1) バイトまで格納できる。それぞれのブロックは次のような構成になっている。 - </para> - <orderedlist> - <listitem>最終ブロックなら 1、そうでなければ 0 (符号なし 1 バイト整数)</listitem> - <listitem>ブロックのバイト長 (符号なし 2 バイト整数)</listitem> - <listitem>ブロックのバイト長の 1 の補数、あるいはビット反転 (符号なし 2 バイト整数)</listitem> - <listitem>データ (最大 65535 バイト)</listitem> - </orderedlist> - <para> + </p> + <p> + 1 つの無圧縮ブロックには 65535 (2<sup>16</sup> - 1) バイトまで格納できる。それぞれのブロックは次のような構成になっている。 + </p> + <ol> + <li>最終ブロックなら 1、そうでなければ 0 (符号なし 1 バイト整数)</li> + <li>ブロックのバイト長 (符号なし 2 バイト整数)</li> + <li>ブロックのバイト長の 1 の補数、あるいはビット反転 (符号なし 2 バイト整数)</li> + <li>データ (最大 65535 バイト)</li> + </ol> + <p> 実際にこの手抜き zlib を実装したものがこちら: - </para> - <programlisting language="go" linenumbering="unnumbered"> + </p> + <codeblock language="go"> <![CDATA[ func encodeZlib(data []byte) []byte { var buf bytes.Buffer @@ -360,23 +357,23 @@ return buf.Bytes() } ]]> - </programlisting> + </codeblock> </section> - <section xml:id="implement-png-encoder--idat-chunk--image-data"> - <title>画像データ</title> - <para> + <section id="implement-png-encoder--idat-chunk--image-data"> + <h>画像データ</h> + <p> では次に、zlib 形式で格納するデータを用意する。PNG 画像は次のような順にスキャンする。 画像の左上のピクセルから同じ行を横にスキャンしていき、一番右まで到達したら次の行の左に向かう。 右下のピクセルまで行けば終わり。要は Z 字型に進んでいく。 - </para> - <para> + </p> + <p> また、それぞれの行の先頭には、圧縮のためのフィルタタイプを指定する。 ただ、今回はその実装を省略するために、常にフィルタ 0 (何も加工しない) を使う。 - </para> - <para> - 先ほどの <literal>encodeZlib</literal> も使って実際に実装したものがこちら: - </para> - <programlisting language="go" linenumbering="unnumbered"> + </p> + <p> + 先ほどの <code>encodeZlib</code> も使って実際に実装したものがこちら: + </p> + <codeblock language="go"> <![CDATA[ func writeChunkIdat(w io.Writer, width, height uint32, img image.Image) { var pixels bytes.Buffer @@ -393,32 +390,32 @@ writeChunk(w, "IDAT", encodeZlib(pixels.Bytes())) } ]]> - </programlisting> + </codeblock> </section> </section> - <section xml:id="implement-png-encoder--iend-chunk"> - <title>IEND chunk</title> - <para> + <section id="implement-png-encoder--iend-chunk"> + <h>IEND chunk</h> + <p> 最後に IEND chunk を書き込む。これは PNG 画像の最後に配置される chunk で、PNG のデコーダはこの chunk に出会うとそこでデコードを停止する。 - </para> - <para> - 特に追加のデータはなく、必要なのは chunk type の <literal>IEND</literal> くらいなので実装は簡単: - </para> - <programlisting language="go" linenumbering="unnumbered"> + </p> + <p> + 特に追加のデータはなく、必要なのは chunk type の <code>IEND</code> くらいなので実装は簡単: + </p> + <codeblock language="go"> <![CDATA[ func writeChunkIend(w io.Writer) { writeChunk(w, "IEND", nil) } ]]> - </programlisting> + </codeblock> </section> </section> - <section xml:id="outro"> - <title>おわりに</title> - <para> + <section id="outro"> + <h>おわりに</h> + <p> 最後に全ソースコードを再掲しておく。 - </para> - <programlisting language="go" linenumbering="unnumbered"> + </p> + <codeblock language="go"> <![CDATA[ package main @@ -595,13 +592,13 @@ return updateAdler32(1, buf) } ]]> - </programlisting> + </codeblock> </section> - <section xml:id="references"> - <title>参考</title> - <itemizedlist> - <listitem><link xl:href="https://www.w3.org/TR/png">Portable Network Graphics (PNG) Specification (Third Edition)</link></listitem> - <listitem><link xl:href="https://www.rfc-editor.org/rfc/rfc1950">ZLIB Compressed Data Format Specification version 3.3</link></listitem> - </itemizedlist> + <section id="references"> + <h>参考</h> + <ul> + <li><a href="https://www.w3.org/TR/png">Portable Network Graphics (PNG) Specification (Third Edition)</a></li> + <li><a href="https://www.rfc-editor.org/rfc/rfc1950">ZLIB Compressed Data Format Specification version 3.3</a></li> + </ul> </section> </article> |