返回

psd解析js库@webtoon/psd使用教程

2024-04-01 psd js库 @webtoon/psd 使用教程 181 0

什么是 @webtoon/psd?

@webtoon/psd 是 Typescript 中轻量级 Adobe Photoshop .psd/.psb 文件解析器,对 Web 浏览器和 NodeJS 环境提供支持,且做到零依赖。@webtoon/psd 使用标准 ES2015+ 功能,因为零依赖性使其比其他 PSD 解析器(ag-psd:200 KiB,PSD.js:443 KiB)更小,压缩后只有大约 100 KiB,同时使用 WebAssembly 来加速图像数据的解码。

@webtoon/psd GitHub地址:https://github.com/webtoon/psd

psd解析js库@webtoon/psd使用教程

目前 Chrome>=57、Firefox>=52、Safari>=11、Edge>=79、Node>=12 版本都已经支持。@webtoon/psd 在 Github 通过 MIT 协议开源,有超过 1.1k 的 star,是一个值得关注的前端开源项目。

如何使用 @webtoon/psd?

1. 浏览器环境使用

@webtoon/psd 作为纯 ECMAScript 模块提供,但是必须与 Webpack 或 Rollup 等捆绑器捆绑。 @webtoon/psd 将 PSD 文件读取为 ArrayBuffer,开发者可以使用 FileReader 或 File 加载 PSD 文件:

import Psd from "@webtoon/psd";
const inputEl: HTMLInputElement = document.querySelector("input[type='file']");
inputEl.addEventListener("change", async () => {
  const file = inputEl.files[0];
  const result = await file.arrayBuffer();
  const psdFile = Psd.parse(result);
    // 获取包含 PSD 或 PSB 文件的 ArrayBuffer
    // 并返回一个新的 Psd 对象
  const canvasElement = document.createElement("canvas");
  const context = canvasElement.getContext("2d");
  const compositeBuffer = await psdFile.composite();
  const imageData = new ImageData(
    compositeBuffer,
    psdFile.width,
    psdFile.height
  );
  canvasElement.width = psdFile.width;
  canvasElement.height = psdFile.height;

  context.putImageData(imageData, 0, 0);
  document.body.append(canvasElement);
});

为了提高性能,非常建议在 Web Worker 而不是主线程中解析 PSD 文件。

2. NodeJS 环境使用

@webtoon/psd 不支持 Node.js 缓冲区,开发者必须显式提供底层 ArrayBuffer。

import * as fs from "fs";
import Psd from "@webtoon/psd";

const psdData = fs.readFileSync("./my-file.psd");
// 在 Buffer 中传递 ArrayBuffer 实例
const psdFile = Psd.parse(psdData.buffer);

由于 @webtoon/psd 是作为 ES 模块提供的,因此开发者必须使用动态 import() 或捆绑器在 CommonJS 代码中运行:

const Psd = await import("@webtoon/psd");

3. 图层遍历

Psd 对象是包含图层和组(即图层组)对象的树,其提供了一个 Children 属性,是顶级图层和组的数组。

每个 Group 对象都提供一个 Children 属性,是直接属于当前图层组的图层和组的数组。Psd、Group 和 Layer 对象提供了一个类型字段,可用于区分每种类型:

import Psd, {Node} from "@webtoon/psd";
// 递归遍历图层和组
function traverseNode(node: Node) {
  if (node.type === "Layer") {
    // 图层
  } else if (node.type === "Group") {
    // 组
  } else if (node.type === "Psd") {
    // PSD 类型
  } else {
    throw new Error("Invalid node type");
  }

  node.children?.forEach((child) => traverseNode(child));
}
traverseNode(psdFile);

Psd 对象还提供了 layers 属性,是图像中所有 Layer(包括嵌套的)的数组。

for (const layer of psdFile.layers) {
  doSomething(layer);
}

4.解码图像数据

开发者可以使用 Psd.prototype.composite() 和 Layer.prototype.composite() 解码整个图像或单个图层的像素信息。

请注意,要使 Psd.prototype.composite() 正常工作,PSD/PSB 文件需要以 “最大化兼容性” 模式保存。 否则,将不返回任何数据。

// 解码整个图像
pixelData = await psd.composite();

// 提取图层的像素数据,并应用所有图层和图层组效果
// (currently, only the opacity is supported)
layerPixelData = await layer.composite();
// 提取图层的像素数据,仅应用图层自身的效果
layerPixelData = await layer.composite(true, false);
// 提取图层的像素数据,无任何效果
layerPixelData = await layer.composite(false);

顶部