GIF と LZW 圧縮とGifWriter.js

id:nobuoka(@nobuoka)

2013-05-23 Kyoto.js #8

こんにちは!

id:nobuoka です

Java とか

JavaScript とか

好きです

突然ですが

GIF の発音について

「ジフ」? 「ギフ」?

https://twitter.com/christinecuoco/status/337015639698989056/photo/1 より

GIF 考案者

Steve Wilhite 氏

Webby 賞の生涯貢献賞受賞

というわけで

GIF の話

GifWriter.js という

JavaScript ライブラリを

つくりました

デモhttp://nobuoka.github.io/GifWriter.js/

canvas のピクセルデータ

(ImageData) から

GIF のバイト列を生成

ImageData

(32-bit/pixel)

Indexed colorimage

(最大 256 色)

GIF 画像バイト列

減色処理

GIF

エンコード

減色処理難しい!!

今回はメディアンカット法

GIF エンコード!!

W3C に spec があるhttp://www.w3.org/Graphics/GIF/spec-gif89a.txt

画像データは

LZW 圧縮の亜種 (?)

で圧縮される

LZW 圧縮の話

辞書式圧縮法 (の辞書の例)

圧縮後符号 生の符号の列

0 0

1 1

2 111

3 000

... ...

LZW 圧縮では生の符号の

並びから自動的に辞書が

決まる

LZW での辞書の初期状態は

圧縮後符号と生の符号が同一圧縮後符号 生の符号の列

0 0

1 1

2 2

3 3

... ...

圧縮対象符号列から

順に符号を取り出して連結

↓

辞書になければ登録 &

辞書にある分だけ書きだし

意味がわからないと

思うので例を書きます!!

1 1 1 0 2 1 2 1 2 1 1 1圧縮対象

バッファ

圧縮後

辞書には初期状態で長さ 1 のすべての生の符号列が含まれる (圧縮後の符号値と生の符号値が同一)

圧縮後 生符号列

0 0

1 1

2 2

3 3

辞書

{ 0, 1, 2, 3 } の 4 つの符号からなる符号列の LZW 圧縮の例

1 1 1 0 2 1 2 1 2 1 1 1圧縮対象

バッファ

圧縮後

まずは最初の符号を取り出す

圧縮後 生符号列

0 0

1 1

2 2

3 3

辞書

1

1 1 0 2 1 2 1 2 1 1 1圧縮対象

バッファ

圧縮後

1 は既に辞書に入っているので次の符号の取り出しへ

圧縮後 生符号列

0 0

1 1

2 2

3 3

辞書

1 1

1 0 2 1 2 1 2 1 1 1圧縮対象

バッファ

圧縮後

1 1 は辞書にないので辞書に追加して、辞書にある部分だけ (最後の符号を除いた前の部分) を書きだし

圧縮後 生符号列

0 0

1 1

2 2

3 3

4 1 1

辞書

1

1

1 0 2 1 2 1 2 1 1 1圧縮対象

バッファ

圧縮後

次の符号を取り出す

圧縮後 生符号列

0 0

1 1

2 2

3 3

4 1 1

辞書

1

1 1

0 2 1 2 1 2 1 1 1圧縮対象

バッファ

圧縮後

1 1 は辞書にあるので、次の符号の取り出しへ

圧縮後 生符号列

0 0

1 1

2 2

3 3

4 1 1

辞書

1

1 1 0

2 1 2 1 2 1 1 1圧縮対象

バッファ

圧縮後

1 1 0 は辞書にないので辞書に追加し、辞書に存在する部分だけを書きだす

圧縮後 生符号列

0 0

1 1

2 2

3 3

4 1 1

5 1 1 0

辞書

1 4

0

2 1 2 1 2 1 1 1圧縮対象

バッファ

圧縮後

圧縮後 生符号列

0 0

1 1

2 2

3 3

4 1 1

5 1 1 0

辞書

という操作を繰り返す

なるほど!!!!

皆さんも圧縮アルゴリズムを

考案しましょう!!!!