Kyoto.js #8 で発表した内容です。

1. GIF と LZW 圧縮と
GifWriter.js
id:nobuoka
(@nobuoka)
2013-05-23 Kyoto.js #8

2. こんにちは!
id:nobuoka です

3. Java とか
JavaScript とか
好きです

4. 突然ですが
GIF の発音について
「ジフ」? 「ギフ」?

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

6. GIF 考案者
Steve Wilhite 氏
Webby 賞の生涯貢献賞受賞

7. というわけで
GIF の話

8. GifWriter.js という
JavaScript ライブラリを
つくりました

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

10. canvas のピクセルデータ
(ImageData) から
GIF のバイト列を生成

11. ImageData
(32-bit/pixel)
Indexed color
image
(最大 256 色)
GIF 画像
バイト列
減
色
処
理
GIF
エ
ン
コ
ー
ド

12. 減色処理難しい!!
今回はメディアンカット法

13. GIF エンコード!!
W3C に spec がある
http://www.w3.org/Graphics/GIF/spec-gif89a.txt

14. 画像データは
LZW 圧縮の亜種 (?)
で圧縮される

15. LZW 圧縮の話

16. 辞書式圧縮法 (の辞書の例)
圧縮後符号 生の符号の列
0 0
1 1
2 111
3 000
... ...

17. LZW 圧縮では生の符号の
並びから自動的に辞書が
決まる

18. LZW での辞書の初期状態は
圧縮後符号と生の符号が同一
圧縮後符号 生の符号の列
0 0
1 1
2 2
3 3
... ...

19. 圧縮対象符号列から
順に符号を取り出して連結
↓
辞書になければ登録 &
辞書にある分だけ書きだし

20. 意味がわからないと
思うので例を書きます!!

21. 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 圧縮の例

22. 1 1 1 0 2 1 2 1 2 1 1 1
圧縮対象
バッファ
圧縮後
まずは最初の符号を取り出す
圧縮後 生符号列
0 0
1 1
2 2
3 3
辞書

23. 1
1 1 0 2 1 2 1 2 1 1 1
圧縮対象
バッファ
圧縮後
1 は既に辞書に入っているので次の符号の取り出しへ
圧縮後 生符号列
0 0
1 1
2 2
3 3
辞書

24. 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
辞書

25. 1
1
1 0 2 1 2 1 2 1 1 1
圧縮対象
バッファ
圧縮後
次の符号を取り出す
圧縮後 生符号列
0 0
1 1
2 2
3 3
4 1 1
辞書

26. 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
辞書

27. 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
辞書

28. 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
辞書
という操作を繰り返す

29. なるほど!!!!

30. 皆さんも圧縮アルゴリズムを
考案しましょう!!!!