Photoshop Extensionの開発17 画像データの取得

javascript, Photoshop

Extensionのパネル自体クロームベースであるためブラウザ同様Imageオブジェクトから画像サイズを取得できる事は前回述べたができる事がかなり限られてしまう。しかしCEP側からはNode.jsモジュールが使用できるので何かしらモジュールを使用すればパネル上で画像データの取得ができる。という事今回はNodeモジュールの使用方法も含めて画像データを取得方法を記載する。まずこちらで画像サイズを取得するimage-sizeというモジュールが公開されている。PSDも含めた幅広い拡張子に対応しているそうなので今回はこれを使ってみよう。

というわけでまずはpackage.jsonの作成。

 

package.jsonができたら次はimage-sizeのインストール。

フォルダーの階層は以下のようになっています。

これでモジュールの準備ができました。ドキュメントによるとメソッドに画像パスを入れると画像の情報が返ってきてとてもシンプルに画像情報を取得できます。しかも同期処理にも対応しているという事で単純な処理だったらシンプルなコードでまとめられるだろう。

シンプルなコードで画像情報を取得できた。しかしexif情報等もっと詳細な情報を取得する場合はどうするか?勿論exif取得モジュールもいろいろ公開されているのでそういったものを使用すれば良いだろうが大体jpegのみ対応したモジュールが多いので様々なフォーマットに対応した画像情報の取得というと一筋縄ではいかない。Photoshopで一度開くという動作自体許容できるならやはりPhotoshopから取得するのが手っ取り早い。

たったこれだけのコードでjsxからexifデータを詳細まで取得できる。但しすでに開かれている画像を誤って選択した場合も編集中だろうがそのまま画像を閉じてしまうのでそういった動作を想定した対策が必要になる。
ここまでのサンプルもこちらに載せておきます。image-sizeとPhotoshopから画像データを取得してパネル上に表示する両方のイベントを載せておきました。

Beer 寄付してサイトを応援する。