はじめに

まずはLT枠5分というはずだったのに15分ほど話してしまい、会場の皆様すみませんでした。

最近 SWF の Lossless, Lossless2, Jpeg3 あたりのデコード実装を JavaScript で行ったので、Lossless 系について話しました。 SWF の話と見せかけて、PNG の仕様の話と JavaScript のパフォーマンスチューニングが大半で、あとは少しだけ zlib.js の宣伝です。

スライドについて

GitHub Pages です。

JSPerfView のグラフを埋め込みたかったので、ブラウザで実行できるスライドツールを探しました。 その中で html5slides が良さそうだったので採用しました。 JSPerfView の使い方には以前書いたものがあるのでご参照ください。

また、JavaScript で画像を扱う話しだったので、実際にブラウザでデコードして表示というのがそのままスライドに埋め込めるのは便利でした。

Android Browser の putImageData のバグについて

現象と対策

@fchiba さんに教えていただいた内容そのままなので、自分が説明するというのも恐縮なんですが備忘録として書いておきます。

Android Browser (確認した限りでは 2.3, 4.0) では CanvasRenderingContext2D#putImageData で描画する際に、描画する ImageData の RGB 値を premultiplied alpha として扱うバグがあるようです。 Android Browser でこのバグがある場合には、CanvasPixelArray に RGBA をセットする際に以下のように alpha 値を掛けてやれば良いようです。

red   = red   * alpha / 255 | 0;
green = green * alpha / 255 | 0;
blue  = blue  * alpha / 255 | 0;
alpha = alpha;

比較

対策前と対策後のページを用意しましたので、Android Browser で確認してください。

なお、ここでは上記の対策だけを入れたコードになっていますので、正常なブラウザで見た際も premultiplied alpha になっています。

バグの有無を判定

このバグを持っているかどうか判別するのをどうするか考えてみたのですが、実際に putImageData して判別するのが分かりやすいかと思いました。 他にもっと良い方法があればください。

Lossless2 のデコードへの影響

Lossless2 では RGB 値を premultiplied alpha で持っているため、Android Browser の場合はそのまま使えば良いことになります。 そのため、Android Browser で Canvas を使用する場合はさらに(特に Direct で)速度を向上させることができます。

お礼

はじめに

最近はいろいろなところで使っていただいているのに、いまだに develop ブランチが安定版というのも申し訳ないので zlib.js としては初のリリースとなる 0.1.0 をリリースしました。

使い方など

GitHub のプロジェクトページをご覧ください。

以前の master ブランチからの変更点など

• パフォーマンス改善
• BusterJS ユニットテスト(一部)の追加
• Node.js 対応
• GZIP圧縮・伸張対応
• ZLIB Inflate のストリーム実装の追加
• 圧縮時不正な出力が行われることがあるバグを修正

はじめに

JavaScript で PSD ファイル (Photoshop Document) をパースする psd.js というのを作り始めました。 以下のURLで公開しています。
https://github.com/imaya/psd.js

psd.js と聞いて、なんか前に聞いた事あるって言う人もいると思いますが、以前話題になった psd.js は Twitpic へ譲渡されたあと GitHub で公開しなくなったようなので、３日ほどでまったく新しく作り始めました。

現在できること

まだざっくりとしか実装していません。

• 基本的な parse
• Image Data, Channel Image Data からキャンバス生成

未実装の部分はすごく大雑把にデータを切り出しているだけです。

将来的にやりたいこと

• ブラウザ上で簡単な PSD Viewer の実装
• PSD の書き出し実装

Demo

GitHub Pagesで試せます。ぜひお試しください。

psd ファイルを選択すると、自動的に parse されます。parse すると、Image Data は Canvas で描画され、コンソールにはパースされた情報が表示されます。

ライセンス

MIT ライセンスです。

参考資料

• Adobe Photoshop File Formats Specification
• PSDデータのフォーマット - ゲームとかプログラムとかパソコンとか

その他

うまく parse できない psd ファイルを募集します

実装時に一番苦労しているのがサンプルとなるファイル集めです。
とりあえずざっくりと動けばいいやという感じで作っていたので、まだまだうまく動かないファイルがあると思います。
そういったファイルを見つけた場合、教えていただければ改善（できそうなら）します。

以前あった実装を真似てるんじゃないの？

ありえません。自分の最も嫌いなもののひとつに「〜〜.js」とか「〜〜JS」ってプロジェクト名なのにソースコードが全て .coffee というのがあるのですが、以前存在した psd.js はまさにこれでした。
話題になったときに少し興味があったのでリポジトリを見てみたのですが、.coffee という文字列をみて回れ右しました。