比 PSD.js 更强的下一代 PSD 解析器，支持 WebAssembly

1.什么是 @webtoon/ps

@webtoon/ps 是 Typescript 中轻量级 Adobe Photoshop .psd/.psb 文件解析器，对 Web 浏览器和 NodeJS 环境提供支持，且做到零依赖。

Fast zero-dependency PSD parser for the web and Node.js

@webtoon/ps 使用标准 ES2015+ 功能，因为零依赖性使其比其他 PSD 解析器（ag-psd：200 KiB，PSD.js：443 KiB）更小，压缩后只有大约 100 KiB，同时使用 WebAssembly 来加速图像数据的解码。

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

2.如何使用 @webtoon/ps

浏览器环境使用

@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 文件。

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);