GIF と LZW 圧縮と GifWriter.js

2,396 views

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,396
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
2
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

GIF と LZW 圧縮と GifWriter.js

  1. 1. GIF と LZW 圧縮とGifWriter.jsid:nobuoka(@nobuoka)2013-05-23 Kyoto.js #8
  2. 2. こんにちは!id:nobuoka です
  3. 3. Java とかJavaScript とか好きです
  4. 4. 突然ですがGIF の発音について「ジフ」? 「ギフ」?
  5. 5. https://twitter.com/christinecuoco/status/337015639698989056/photo/1 より
  6. 6. GIF 考案者Steve Wilhite 氏Webby 賞の生涯貢献賞受賞
  7. 7. というわけでGIF の話
  8. 8. GifWriter.js というJavaScript ライブラリをつくりました
  9. 9. デモhttp://nobuoka.github.io/GifWriter.js/
  10. 10. canvas のピクセルデータ(ImageData) からGIF のバイト列を生成
  11. 11. ImageData(32-bit/pixel)Indexed colorimage(最大 256 色)GIF 画像バイト列減色処理GIFエンコード
  12. 12. 減色処理難しい!!今回はメディアンカット法
  13. 13. GIF エンコード!!W3C に spec があるhttp://www.w3.org/Graphics/GIF/spec-gif89a.txt
  14. 14. 画像データはLZW 圧縮の亜種 (?)で圧縮される
  15. 15. LZW 圧縮の話
  16. 16. 辞書式圧縮法 (の辞書の例)圧縮後符号 生の符号の列0 01 12 1113 000... ...
  17. 17. LZW 圧縮では生の符号の並びから自動的に辞書が決まる
  18. 18. LZW での辞書の初期状態は圧縮後符号と生の符号が同一圧縮後符号 生の符号の列0 01 12 23 3... ...
  19. 19. 圧縮対象符号列から順に符号を取り出して連結↓辞書になければ登録 &辞書にある分だけ書きだし
  20. 20. 意味がわからないと思うので例を書きます!!
  21. 21. 1 1 1 0 2 1 2 1 2 1 1 1圧縮対象バッファ圧縮後辞書には初期状態で長さ 1 のすべての生の符号列が含まれる (圧縮後の符号値と生の符号値が同一)圧縮後 生符号列0 01 12 23 3辞書{ 0, 1, 2, 3 } の 4 つの符号からなる符号列の LZW 圧縮の例
  22. 22. 1 1 1 0 2 1 2 1 2 1 1 1圧縮対象バッファ圧縮後まずは最初の符号を取り出す圧縮後 生符号列0 01 12 23 3辞書
  23. 23. 11 1 0 2 1 2 1 2 1 1 1圧縮対象バッファ圧縮後1 は既に辞書に入っているので次の符号の取り出しへ圧縮後 生符号列0 01 12 23 3辞書
  24. 24. 1 11 0 2 1 2 1 2 1 1 1圧縮対象バッファ圧縮後1 1 は辞書にないので辞書に追加して、辞書にある部分だけ (最後の符号を除いた前の部分) を書きだし圧縮後 生符号列0 01 12 23 34 1 1辞書
  25. 25. 111 0 2 1 2 1 2 1 1 1圧縮対象バッファ圧縮後次の符号を取り出す圧縮後 生符号列0 01 12 23 34 1 1辞書
  26. 26. 11 10 2 1 2 1 2 1 1 1圧縮対象バッファ圧縮後1 1 は辞書にあるので、次の符号の取り出しへ圧縮後 生符号列0 01 12 23 34 1 1辞書
  27. 27. 11 1 02 1 2 1 2 1 1 1圧縮対象バッファ圧縮後1 1 0 は辞書にないので辞書に追加し、辞書に存在する部分だけを書きだす圧縮後 生符号列0 01 12 23 34 1 15 1 1 0辞書
  28. 28. 1 402 1 2 1 2 1 1 1圧縮対象バッファ圧縮後圧縮後 生符号列0 01 12 23 34 1 15 1 1 0辞書という操作を繰り返す
  29. 29. なるほど!!!!
  30. 30. 皆さんも圧縮アルゴリズムを考案しましょう!!!!

×