npm 包 nodepsd 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

在前端开发中，我们常常需要对一些 PSD（Photoshop Document）文件进行切图或者提取其中的文字、颜色等信息。而 nodepsd 就是一个可以让我们直接通过代码来操作 PSD 文件的 npm 包。

安装

使用 npm 进行安装即可：

npm install nodepsd --save

使用

1. 载入 PSD 文件

首先我们需要通过 nodepsd 的 open() 方法来载入 PSD 文件：

const PSD = require('nodepsd');
const psd = PSD.fromFile('path/to/psd');
psd.parse();

2. 获取图层信息

在载入 PSD 文件后，我们可以通过 psd.tree() 获取 PSD 文件中所有的图层信息：

const tree = psd.tree();

得到的 tree 变量即是一个包含 PSD 文件中所有图层信息的树状数据结构，其结构类似于下面这样：

-- -------------------- ---- -------
-
  -
    ----- ------ ---
    --------- -
      -
        ----- --------- --
      --
      -
        ----- --------- --
      -
    -
  --
  -
    ----- ------ --
  -
  ---
-

3. 输出图层信息

我们可以通过遍历树状结构来输出所有图层的信息：

tree.forEach(layer => {
  console.log(layer.name);
  if (layer.children) {
    layer.children.forEach(sublayer => {
      console.log(sublayer.name);
    });
  }
});

4. 导出图层为 PNG 格式

nodepsd 也支持将图层导出为 PNG 格式：

const layer = psd.tree()[0]; // 获取第一个图层
layer.saveAsPng('path/to/output.png');

示例代码

-- -------------------- ---- -------
----- --- - -------------------
----- --- - ----------------------------
------------

----- ---- - -----------

------------------ -- -
  ------------------------
  -- ---------------- -
    ------------------------------- -- -
      ---------------------------
    ---
  -
---

----- ---------- - --------
-------------------------------------------

总结

使用 nodepsd 可以让我们以代码的方式来操作 PSD 文件，从而方便我们在前端开发中进行图像的处理。当然，我们也可以根据需要针对 nodepsd 进行二次开发，以满足更为复杂的需求。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055bba81e8991b448d9521