psd.js中文文档(译)

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

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示例

  1. var PSD = require('psd');
  2. var psd = PSD.fromFile("path/to/file.psd");
  3. psd.parse();
  5. console.log(psd.tree().export());
  6. console.log(psd.tree().childrenAtPath('A/B/C')[0].export());
  8. //你也可以用promise语法执行打开和解析的操作
  9. PSD.open("path/to/file.psd").then(function (psd) {
  10.   return psd.image.saveAsPng('./output.png');
  11. }).then(function () {
  12.   console.log("Finished!")
  13. });
  14. 复制代码

浏览器示例

  1. var PSD = require('psd');
  3. //从URL加载
  4. PSD.fromURL("/path/to/file.psd").then(function(psd) {
  5.   document.getElementById('ImageContainer').appendChild(psd.image.toPng());
  6. });
  8. //从事件加载，比如：拖放
  9. function onDrop(evt) {
  10.   PSD.fromEvent(evt).then(function(psd) {
  11.     console.log(psd.tree().export());
  12.   });
  13. }复制代码

遍历文档

使用 psd.tree() 获取根节点，以树结构的形式访问文档。

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

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

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

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

访问图层数据

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

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

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

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

导出数据

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

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

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

  1. { children: 
  2.    [ { type: 'group',
  3.        visible: false,
  4.        opacity: 1,
  5.        blendingMode: 'normal',
  6.        name: 'Version D',
  7.        left: 0,
  8.        right: 900,
  9.        top: 0,
  10.        bottom: 600,
  11.        height: 600,
  12.        width: 900,
  13.        children: 
  14.         [ { type: 'layer',
  15.             visible: true,
  16.             opacity: 1,
  17.             blendingMode: 'normal',
  18.             name: 'Make a change and save.',
  19.             left: 275,
  20.             right: 636,
  21.             top: 435,
  22.             bottom: 466,
  23.             height: 31,
  24.             width: 361,
  25.             mask: {},
  26.             text: 
  27.              { value: 'Make a change and save.',
  28.                font: 
  29.                 { name: 'HelveticaNeue-Light',
  30.                   sizes: [ 33 ],
  31.                   colors: [ [ 85, 96, 110, 255 ] ],
  32.                   alignment: [ 'center' ] },
  33.                left: 0,
  34.                top: 0,
  35.                right: 0,
  36.                bottom: 0,
  37.                transform: { xx: 1, xy: 0, yx: 0, yy: 1, tx: 456, ty: 459 } },
  38.             image: {} } ] } ],
  39.     document: 
  40.        { width: 900,
  41.          height: 600,
  42.          resources: 
  43.           { layerComps: 
  44.              [ { id: 692243163, name: 'Version A', capturedInfo: 1 },
  45.                { id: 725235304, name: 'Version B', capturedInfo: 1 },
  46.                { id: 730932877, name: 'Version C', capturedInfo: 1 } ],
  47.             guides: [],
  48.             slices: [] } } }复制代码

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

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

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

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

发表评论

表情：
评论列表 （有 0 条评论，883人围观）

还没有评论，来说两句吧...

相关阅读