前回に続きnpmモジュールのpsdを使用してPhotoshop .psdファイルの中身を覗いてみたいと思います。

psdデータからテキストとテキストスタイルを取り出す

以下のようなクラスを作成してみました

psdext

https://github.com/econosys-system/psdext

psdファイルの中を走査してテキストファイルとそれにつけられているcssクラスを取り出し画面に表示します

使い方

let psdext = require('./psdext.js');
let p = new psdext();
p.loadFile("my.psd");
p.extractText('my_group');

使い方（コマンドライン）

node index.js [psd-filename] [psd-groupname]

結果例

<p class="HOME">HOME</p>


.HOME {
  font-size: 14px;
  font-family: "OpenSans-Semibold";
  color: rgb(255, 255, 255);
  --line-height: 0.8571428571428571;
  --text-align: left;
  position: absolute;
  top: 11px;
  left: 0px;
  width: calc( 41px + 2px );
  height: calc( 12px + 2px );
}

こんな感じで簡易的ではありますがhtmlとcssクラスを取り出すことができます。

（とりあえず、、、な制作なので細かいテストはできておりません。バグや要望など有りましたら是非。）