PSD.js 技术文档

本文档旨在帮助用户安装、使用以及详细了解 PSD.js 项目。以下是关于该项目的安装指南、使用说明和项目API使用文档。

一、安装指南

PSD.js 项目没有任何本地依赖。您只需将 psd 添加到您的 package.json 文件中，或者运行以下命令安装：

npm install psd

二、项目的使用说明

PSD.js 在 NodeJS 和浏览器中都可以使用，并且使用方式几乎完全相同。

NodeJS 示例

var PSD = require('psd');
var psd = PSD.fromFile("路径/to/文件.psd");
psd.parse();

console.log(psd.tree().export());
console.log(psd.tree().childrenAtPath('A/B/C')[0].export());

// 您也可以使用 Promise 语法来打开和解析
PSD.open("路径/to/文件.psd").then(function (psd) {
  return psd.image.saveAsPng('./output.png');
}).then(function () {
  console.log("处理完成！");
});

浏览器示例

var PSD = require('psd');

// 从 URL 加载
PSD.fromURL("/路径/to/文件.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(): 获取包括当前节点在内的所有兄弟树节点（例如，文件夹中的所有图层）
• nextSibling(): 获取紧跟当前节点的兄弟节点
• prevSibling(): 获取紧邻当前节点之前的兄弟节点
• hasSiblings(): 这个节点有兄弟节点吗？
• onlyChild(): hasSiblings() 的相反
• descendants(): 获取不包括当前节点的所有后代节点
• subtree(): 与 descendants() 相同，但从当前节点开始
• depth(): 计算当前节点的深度（根节点为 0）
• path(): 获取当前节点的路径

如果您知道树中某个组或图层的路径，可以按该路径搜索。请注意，这始终返回一个数组，因为图层/组名称不必须是唯一的。搜索始终限定在当前节点的后代中。

psd.tree().childrenAtPath('版本 A/底图');
psd.tree().childrenAtPath(['版本 A', '底图']);

访问图层数据

要获取图层的名称或尺寸等数据：

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

PSD 文件还在 "图层信息" 块中存储了各种信息。有关 PSD.js 解析的所有可能的图层信息块，请参见 lib/psd/layer/info.coffee 文件中的 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": "版本 D",
      "left": 0,
      "right": 900,
      "top": 0,
      "bottom": 600,
      "height": 600,
      "width": 900,
      "children": [
        {
          "type": "layer",
          "visible": true,
          "opacity": 1,
          "blendingMode": "normal",
          "name": "进行更改并保存。",
          "left": 275,
          "right": 636,
          "top": 435,
          "bottom": 466,
          "height": 31,
          "width": 361,
          "mask": {},
          "text": {
            "value": "进行更改并保存。",
            "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": "版本 A", "capturedInfo": 1},
        {"id": 725235304, "name": "版本 B", "capturedInfo": 1},
        {"id": 730932877, "name": "版本 C", "capturedInfo": 1}
      ],
      "guides": [],
      "slices": []
    }
  }
}

您还可以将 PSD 导出为平铺图像。请注意，目前并不支持所有图像模式 + 深度。

png = psd.image.toPng(); // 获取 PNG 对象
psd.image.saveAsPng('路径/to/输出.png').then(function () {
  console.log('导出完成！');
});

这使用了 Photoshop 提供的完整光栅化预览。如果文件未启用兼容性模式保存，这将返回一个空图像。

三、项目API使用文档

PSD.js 的注解源代码文档可供参考，您可以通过以下链接查看：源代码文档。

• 要获取图层信息，请参考：图层信息文件。

请按照上述指南和示例代码使用 PSD.js，以充分利用其功能。