psd.js中文文档(译)

PSD.js

翻译自&＃xff1a;www.npmjs.com/package/psd

概述

这是一个用Coffeescript编写的通用PSD解析器&＃xff0c;基于PSD.rb&＃xff08;用ruby写的PSD解析器&＃xff09;。

它让你可以用可管理的树结构来处理Photoshop文档&＃xff0c;并得到关键数据&＃xff0c;例如&＃xff1a;

文件结构
文件大小
图层/目录大小&＃43;定位
图层/目录名
图层/目录可见性和不透明度
字体数据&＃xff08;通过psd-enginedata&＃xff09;

- 文本内容
- 字体种类&＃xff0c;大小&＃xff0c;颜色

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

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

安装

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

文档

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

用法

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

NodeJS示例

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

浏览器示例

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

遍历文档

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

使用以下的这些方法可以处理树&＃xff1a;

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

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

psd.tree().childrenAtPath(&＃39;Version A/Matte&＃39;); psd.tree().childrenAtPath([&＃39;Version A&＃39;, &＃39;Matte&＃39;]);

访问图层数据

获取图层的命名或者尺寸等信息&＃xff1a;

node &＃61; psd.tree().descendants()[0]; node.get(&＃39;name&＃39;); node.get(&＃39;width&＃39;);

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

node &＃61; psd.tree().descendants()[0] node.get(&＃39;typeTool&＃39;).export() node.get(&＃39;vectorMask&＃39;).export()

导出数据

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

console.log(psd.tree().export());

提供的访问信息类似如下&＃xff1a;

{ children: [ { type: &＃39;group&＃39;,visible: false,opacity: 1,blendingMode: &＃39;normal&＃39;,name: &＃39;Version D&＃39;,left: 0,right: 900,top: 0,bottom: 600,height: 600,width: 900,children: [ { type: &＃39;layer&＃39;,visible: true,opacity: 1,blendingMode: &＃39;normal&＃39;,name: &＃39;Make a change and save.&＃39;,left: 275,right: 636,top: 435,bottom: 466,height: 31,width: 361,mask: {},text: { value: &＃39;Make a change and save.&＃39;,font: { name: &＃39;HelveticaNeue-Light&＃39;,sizes: [ 33 ],colors: [ [ 85, 96, 110, 255 ] ],alignment: [ &＃39;center&＃39; ] },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: &＃39;Version A&＃39;, capturedInfo: 1 },{ id: 725235304, name: &＃39;Version B&＃39;, capturedInfo: 1 },{ id: 730932877, name: &＃39;Version C&＃39;, capturedInfo: 1 } ],guides: [],slices: [] } } }