NPM 包 Betterer-PSD 使用教程

什么是 Betterer-PSD?

Betterer-PSD 是一款用于从 PSD 文件中提取信息的 NPM 包。该包可以帮助前端工程师快速提取 PSD 文件中的 CSS 样式、图片等信息，以便于开发网页或者应用。

安装 Betterer-PSD

Betterer-PSD 是一款 NPM 包，在使用之前，需要先安装它。安装命令如下：

npm install betterer-psd --save

使用 Betterer-PSD

使用 Betterer-PSD 的方式很简单，只需要使用 Node.js 中的 require() 方法引入包，再调用提取方法即可。示例代码如下：

const bettererPsd = require('betterer-psd');

let psdFile = 'example.psd';

let extractedData = bettererPsd.extract(psdFile);

console.log(extractedData);

其中，psdFile 参数为 PSD 文件的路径，extractedData 变量则为提取出的数据。

获取 PSD 文件中的样式信息

使用 Betterer-PSD 可以轻松地获取 PSD 文件中的样式信息。具体步骤如下：

1. 包含必要的依赖：

const bettererPsd = require('betterer-psd');
const util = require('util');
const fs = require('fs');

1. 读取 PSD 文件

let psdFile = 'example.psd';
let psdBuffer = fs.readFileSync(psdFile);

1. 调用 extractCSS 方法提取样式信息

let extractedCSS = bettererPsd.extractCSS(psdBuffer);
console.log(util.inspect(extractedCSS, false, null))

提取出来的样式信息格式

提取出来的样式信息是一个数组，每一个元素都包含一段 CSS 样式。

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

提取 PSD 文件中的图片

使用 Betterer-PSD 还可以轻松地从 PSD 文件中提取图片。具体步骤如下：

1. 包含必要的依赖：

const bettererPsd = require('betterer-psd');
const util = require('util');
const fs = require('fs');

1. 读取 PSD 文件

let psdFile = 'example.psd';
let psdBuffer = fs.readFileSync(psdFile);

1. 调用 extractImages 方法提取图片信息

let extractedImages = bettererPsd.extractImages(psdBuffer);
console.log(util.inspect(extractedImages, false, null))

提取出来的图片信息格式

提取出来的图片信息是一个数组，每一个元素都是一个对象。对于普通图层，每一个对象包含一张图片的信息。

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

结语

Betterer-PSD 是一款非常方便的 NPM 包，它可以帮助开发者从 PSD 文件中提取样式和图片等信息，方便开发工作。如果你是一名前端开发者，我相信它一定能为你的工作带来帮助。

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