GIF と LZW 圧縮と GifWriter.js

  • 1,562 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,562
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. GIF と LZW 圧縮とGifWriter.jsid: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 colorimage(最大 256 色)GIF 画像バイト列減色処理GIFエンコード
  • 12. 減色処理難しい!!今回はメディアンカット法
  • 13. GIF エンコード!!W3C に spec があるhttp://www.w3.org/Graphics/GIF/spec-gif89a.txt
  • 14. 画像データはLZW 圧縮の亜種 (?)で圧縮される
  • 15. LZW 圧縮の話
  • 16. 辞書式圧縮法 (の辞書の例)圧縮後符号 生の符号の列0 01 12 1113 000... ...
  • 17. LZW 圧縮では生の符号の並びから自動的に辞書が決まる
  • 18. LZW での辞書の初期状態は圧縮後符号と生の符号が同一圧縮後符号 生の符号の列0 01 12 23 3... ...
  • 19. 圧縮対象符号列から順に符号を取り出して連結↓辞書になければ登録 &辞書にある分だけ書きだし
  • 20. 意味がわからないと思うので例を書きます!!
  • 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. 1 1 1 0 2 1 2 1 2 1 1 1圧縮対象バッファ圧縮後まずは最初の符号を取り出す圧縮後 生符号列0 01 12 23 3辞書
  • 23. 11 1 0 2 1 2 1 2 1 1 1圧縮対象バッファ圧縮後1 は既に辞書に入っているので次の符号の取り出しへ圧縮後 生符号列0 01 12 23 3辞書
  • 24. 1 11 0 2 1 2 1 2 1 1 1圧縮対象バッファ圧縮後1 1 は辞書にないので辞書に追加して、辞書にある部分だけ (最後の符号を除いた前の部分) を書きだし圧縮後 生符号列0 01 12 23 34 1 1辞書
  • 25. 111 0 2 1 2 1 2 1 1 1圧縮対象バッファ圧縮後次の符号を取り出す圧縮後 生符号列0 01 12 23 34 1 1辞書
  • 26. 11 10 2 1 2 1 2 1 1 1圧縮対象バッファ圧縮後1 1 は辞書にあるので、次の符号の取り出しへ圧縮後 生符号列0 01 12 23 34 1 1辞書
  • 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. 1 402 1 2 1 2 1 1 1圧縮対象バッファ圧縮後圧縮後 生符号列0 01 12 23 34 1 15 1 1 0辞書という操作を繰り返す
  • 29. なるほど!!!!
  • 30. 皆さんも圧縮アルゴリズムを考案しましょう!!!!