3DCGを用いたwebサービス開発の過程において、PSDファイルをTypescriptにより効率的に編集するライブラリを開発致しました。

PSDファイル編集の非効率性

マルチレイヤを扱うことが可能な各種画像形式において、PSDは、対応グラフィックソフトが多い点において優れている一方、Web上のコードによりファイルを編集する方法が不足しておりました。結果として、3DCGを用いたwebサービスを開発する上で、テクスチャ編集を自動的に行う方法がなく、効率的なサービス運用の方式を描くことが困難な状況にありました。

PSDをTypeScriptにより編集するライブラリの開発

PSDファイルの公開仕様に基づき、Web開発向けPSD編集ライブラリを開発致しました。バイナリファイルの読み書きから、画像変換・画像合成に至るまで、web上でPSDを取り扱う際に必要な機能を網羅しております。

バイナリ読み込み

PSDファイルのバイナリを読み込みデータ構造をメモリに格納。または、メモリ内のデータ構造をバイナリ化しPSDファイルを作成。

レイヤー・フォルダ構造構築

PSDファイルに格納されている個別データを構造化し、実際のレイヤー構造を再現。PSDファイルがない場合においては、Webインターフェイス上の画像編集によりレイヤー構造を構築。

Web形式への画像変換

PSDにて表現されている画像をWeb閲覧可能な形式に変換。単純な画像を生成するため、そのままダウンロードすることが可能。

レイヤー・フォルダ構造のPSD形式変換

作成したレイヤー・フォルダ構造をPSD形式のファイル構造に変換。

バイナリ書き出し

作成したPSDファイル構造を実際のバイナリとして書き出し。PSDファイルの取得が可能。