はじめに

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

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

現在できること

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

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

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

将来的にやりたいこと

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

Demo

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

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

ライセンス

MIT ライセンスです。

参考資料


その他

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

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

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

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