现在市面上很多的webapp都提供模板功能，所谓模板就是一系列元素的集合，模板的制作一般都需要设计师先在Photoshop等软件中制作好设计好，然后再一定的方式来还原设计稿，要么需要编码要么需要在某些应用中按照设计稿重画设计生成模板数据，都还是比较麻烦的，我们能不能通过psd文件直接生成模板呢？要做到这点我们就需要解析psd文件，而psd文件是Photoshop软件的涉及保存文件，浏览器并不能直接识别，所幸的是psd.js赋予了我们这样的能力。

psd.js 是一个用来解析PhotoShop的PSD文件的 JavaScript 库，支持在浏览器上运行以及Node.js环境中使用，通过psd.js我们可以处理PSD文档并得到关键数据，例如：

1、文件结构

2、文件大小

3、图层/目录大小+定位

4、图层/目录名

5、图层/目录可见性和不透明度

6、字体数据

7、文本内容

8、字体种类，大小，颜色

9、颜色模式和相应数值

10、矢量蒙版数据

11、平面图像数据

12、图层组合

一、服务端使用

1、安装

PSD.js没有原生依赖项，我们可以通过npm install psd --save来安装psd.js并将其加入到我们的项目依赖中。

2、使用示例

var PSD = require('psd');
var psd = PSD.fromFile("path/to/file.psd");
psd.parse();
console.log(psd.tree().export());
console.log(psd.tree().childrenAtPath('A/B/C')[0].export());
//你也可以用promise语法执行打开和解析的操作
PSD.open("path/to/file.psd").then(function (psd) {
  return psd.image.saveAsPng('./output.png');
}).then(function () {
  console.log("Finished!")
});

二、浏览器端使用

1、安装

浏览器端我们只需要在页面引用dist版本的psd.js源文件即可使用其全部功能。

2、使用

PSD.js在浏览器和NodeJS环境中的用法大致相同，示例如下：

var PSD = require('psd');
//从URL加载
PSD.fromURL("/path/to/file.psd").then(function(psd) {
  document.getElementById('ImageContainer').appendChild(psd.image.toPng());
});
  
//从事件加载，比如：拖放
function onDrop(evt) {
  PSD.fromEvent(evt).then(function(psd) {
    console.log(psd.tree().export());
  });
}

需要注意的是服务端通过文件加载PSD文件是用的PSD.fromFile方法，而浏览器端通过使用的是PSD.fromURL方法从url加载psd文件，对于浏览器本地文件的加载我们可以通过URL.createObjectURL方法生成objectUrl再调用PSD.fromURL方法。

github链接：https://github.com/meltingice/psd.js