psd.js中文文档(译)

桃扇骨 2022-01-12 04:03 814阅读 0赞

# PSD.js #

翻译自：[www.npmjs.com/package/psd][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就可以。

## 文档 ##

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

## 用法 ##

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

### 浏览器示例 ###

### 遍历文档 ###

使用 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文件还存储各种信息在“图层信息”块。查看[此文档][Link 3]，了解更多关于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

[www.npmjs.com_package_psd]: https://link.juejin.im?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fpsd
[psd-enginedata]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Flayervault%2Fpsd-enginedata
[Link 1]: https://link.juejin.im?target=http%3A%2F%2Fmeltingice.github.io%2Fpsd.js%2Fdocs%2F
[Link 2]: https://link.juejin.im?target=http%3A%2F%2Fmeltingice.github.io%2Fpsd.js%2Fdocs%2Flib%2Fpsd%2Flayer%2Finfo.coffee.html
[Link 3]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fmeltingice%2Fpsd.js%2Fblob%2Fmaster%2Flib%2Fpsd%2Flayer%2Finfo.coffee