在前端开发中，有时需要将设计师提供的 Photoshop PSD 文件转换为 Web 页面。这时需要将 PSD 文件中的图层等信息一一提取出来，转换为 HTML、CSS、JS 等 Web 技术所支持的文件格式。此时，就可以使用 npm 包 psd。
环境安装
使用 psd 包需要提前安装 Node.js 和 npm。安装命令如下：
npm install -g psd
随后，就可以在项目中使用 psd 包了。
基本用法
-- -------------------- ---- ------- ----- --- - --------------- ----- ---- - ---------------- ----- ------- - -------------------- ---------------------------- ----- --- - ---------------------- ------------ ----- --------- - -------------------- -- -------------- -----------------------展开代码
以上代码中，path/to/your/psdfile.psd 是需要转换的 PSD 文件路径。通过 PSD.fromFile 方法可以将该文件对象解析为 psd 包中的对象。通过调用 parse 方法，可以解析该 PSD 文件并准备导出 PSD 文件的所有顶层图层。最后，通过 psd.tree().export() 方法，可以将 PSD 文件的所有顶层图层导出为对象。
导出图层
还可以使用 psd 包的 toPNG() 方法将 PSD 图层导出为 PNG 格式。具体方法如下：
const layer = psd.tree().descendants()[0]; const png = layer.toPNG(); console.log(png);
其中，descendants()[0] 返回的是 PSD 文件的第一个图层，toPNG() 方法将其导出为 PNG 格式。可以将其保存为图片文件，并添加到 Web 页面中。
深度使用
psd 包的深度使用需要对 PSD 文件有一定理解。如果能够清晰地了解每个图层所代表的内容，那么可以轻松地通过 psd 包将 PSD 文件转为 Web 页面。
首先，可以判断 PSD 文件的每个图层类型。
const psd = PSD.fromFile(psdFile); psd.parse(); const allLayers = psd.tree().descendants(); for (let layer of allLayers) { console.log(layer.kind); // 输出所有 PSD 文件中的所有图层类型 }
可以使用上述代码获取 PSD 文件中所有图层的类型。种类主要包括：
- LAYER，普通图层。
- GROUP，图层组。
- HIDDEN，隐藏的图层。
如果 PSD 文件的图层是 GROUP 类型，可以进一步获取 GROUP 类型图层的子图层。
-- -------------------- ---- ------- ----- --- - ---------------------- ------------ ----- --------- - ------------------------- --- ---- ----- -- ---------- - -- ----------------- - ------------------------------ -- ------------ - -展开代码
以上代码中，isGroup() 方法可以判断当前图层是否为图层组。如果是，则可以通过 children() 方法获取该图层组的子图层数组。
总结
通过 npm 包 psd，可以方便地将设计师提供的 PSD 文件转换为 Web 页面。通过 psd 包的基本操作和深度使用，可以实现更加复杂的 PSD 文件的转换与数据导出。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75016
