psd.js中文文档(译)

PSD.js

翻译自：www.npmjs.com/package/psd

概述

这是一个用Coffeescript编写的通用PSD解析器，基于PSD.rb（用ruby写的PSD解析器）。

它让你可以用可管理的树结构来处理Photoshop文档，并得到关键数据，例如：

• 文件结构
• 文件大小
• 图层/目录大小+定位
• 图层/目录名
• 图层/目录可见性和不透明度
• 字体数据（通过psd-enginedata）

• • 文本内容
  • 字体种类，大小，颜色

• 颜色模式和相应数值
• 矢量蒙版数据
• 平面图像数据
• 图层组合

PSD.js可以在NodeJS和浏览器中运行（使用browserify）。PSD.rb中仍然存在一些缺陷，例如没有图层压缩过滤，内置渲染器和许多图层块的信息。PSD.js会和PSD.rb的内容同步匹配。

安装

PSD.js没有原生依赖项，只需要将它加到你的package.json文件或者直接在命令行执行npm install psd就可以。

文档

带注释的源代码文档可以点击这里得到。
如果你还想深入理解怎么从图层访问各种元数据，你可以看看文档。

用法

PSD.js在浏览器和NodeJS环境中的用法大致相同。

NodeJS示例

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!")
});
复制代码

浏览器示例

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.tree() 获取根节点，以树结构的形式访问文档。

使用以下的这些方法可以处理树：

• root(): 在树的任意位置都可以获取根节点
• isRoot(): 判断是不是根节点
• children(): 获取节点的所有直系子节点
• hasChildren(): 判断节点有没有子节点
• childless(): 得到与hasChildren()相反的结果
• ancestors(): 获取节点的所有祖先节点（不包含当前节点）
• siblings(): 获取所有兄弟树节点，包括当前节点（例如文件夹中的所有图层）
• nextSblings(): 获取当前节点后的所有兄弟节点
• prevSblings(): 获取当前节点前的所有兄弟节点
• hasSiblings(): 判断是否有兄弟节点
• onlyChild(): 得到与hasSiblings()相反的结果
• descendants(): 获取当前节点外的所有后代节点
• subtree(): 获取包括当前节点的所有后代节点
• depth(): 计算当前节点的深度（根节点为0）
• path(): 获取当前节点的路径

如果你知道树中组或者图层的路径，就能用路径搜索。需要注意的是，通过这种方式返回的一定是数组，因为图层/组的命名不必是唯一的。这种搜索同样作用于当前节点的后代。

psd.tree().childrenAtPath('Version A/Matte');
psd.tree().childrenAtPath(['Version A', 'Matte']);复制代码

访问图层数据

获取图层的命名或者尺寸等信息：

node = psd.tree().descendants()[0];
node.get('name');
node.get('width');复制代码

PSD文件还存储各种信息在“图层信息”块。查看此文档，了解更多关于PSD.js解析图层信息块的信息（在LAYER_INFO对象中）。图层之间存在不同，你能通过以下方法访问它们：

node = psd.tree().descendants()[0]
node.get('typeTool').export()
node.get('vectorMask').export()复制代码

导出数据

使用树结构时，可以递归地将任何节点导出到指定对象。 这不会转存所有内容，但它包含最常访问的信息。

console.log(psd.tree().export());复制代码

提供的访问信息类似如下：

{ children: 
   [ { type: 'group',
       visible: false,
       opacity: 1,
       blendingMode: 'normal',
       name: 'Version D',
       left: 0,
       right: 900,
       top: 0,
       bottom: 600,
       height: 600,
       width: 900,
       children: 
        [ { type: 'layer',
            visible: true,
            opacity: 1,
            blendingMode: 'normal',
            name: 'Make a change and save.',
            left: 275,
            right: 636,
            top: 435,
            bottom: 466,
            height: 31,
            width: 361,
            mask: {},
            text: 
             { value: 'Make a change and save.',
               font: 
                { name: 'HelveticaNeue-Light',
                  sizes: [ 33 ],
                  colors: [ [ 85, 96, 110, 255 ] ],
                  alignment: [ 'center' ] },
               left: 0,
               top: 0,
               right: 0,
               bottom: 0,
               transform: { xx: 1, xy: 0, yx: 0, yy: 1, tx: 456, ty: 459 } },
            image: {} } ] } ],
    document: 
       { width: 900,
         height: 600,
         resources: 
          { layerComps: 
             [ { id: 692243163, name: 'Version A', capturedInfo: 1 },
               { id: 725235304, name: 'Version B', capturedInfo: 1 },
               { id: 730932877, name: 'Version C', capturedInfo: 1 } ],
            guides: [],
            slices: [] } } }复制代码

您还可以将PSD导出为平面图像。但需要注意的是，这种操作不是所有图像类型和深度都支持。

png = psd.image.toPng(); //获取PNG对象
psd.image.saveAsPng('path/to/output.png').then(function () {
  console.log('Exported!');
});复制代码

这使用Photoshop提供的全栅格化预览。 如果在启用兼容模式的情况下未保存文件，则会返回空图像。

转载于:https://juejin.im/post/5d099a9de51d4556bb4cd393