psd

@webtoon/psd

轻巧的Adobe Photoshop .psd/.psb文件解析器在打字稿中，Web浏览器和Nodejs零依赖性

@webtoon/psd是Adobe Photoshop PSD/PSB文件的快速，轻巧的解析器。它使用标准（ES2015+）功能，并且可以在Web浏览器和Node.js中使用。它的依赖性为零，使其比其他PSD解析器（AG-PSD：200 KIB，PSD.JS：443 KIB）更小（〜100 KIB缩小）。它使用WebAssembly加快解码图像数据。

浏览器支持

铬合金	Firefox	野生动物园	边缘	节点
57	52	11	79	12

*不支持Internet Explorer

安装

$ npm install @webtoon/psd

基准

您可以在浏览器中为 @webtoon/psd运行基准测试。

特征

✅支持

• 支持大格式（ .psb ）
• 图像 /图层信息（大小，偏移等）
• 图像 /图层像素数据
• Unicode层的名称
• 图像 /图层不透明度
• 文本层字符串值
• 向导
• 切片

？正在进行中

• 图层效果（阴影，覆盖等）

不支持

• Photoshop元数据与图像无直接关系

用法

@webtoon/psd作为纯ecmasixt模块提供。

网络浏览器

查看Web浏览器的实时演示（源代码）。

@webtoon/psd必须捆绑与bundler捆绑在一起，例如webpack或crolup。

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

  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工作人员而不是主线程中解析PSD文件。

nodejs

查看Web浏览器的nod​​e.js示例的源代码。

@webtoon/psd不支持node.js Buffer 。您必须明确提供基础ArrayBuffer 。

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

const psdData = fs . readFileSync ( "./my-file.psd" ) ;
// Pass the ArrayBuffer instance inside the Buffer
const psdFile = Psd . parse ( psdData . buffer ) ;

由于@webtoon/psd作为ES模块提供，因此您必须使用Dynamic import()或Bundler在COMPORJS代码中运行它：

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

API文档

该库将Psd类作为默认导出。

打开文件

Psd.parse(ArrayBuffer)采用一个包含PSD或PSB文件的ArrayBuffer ，并返回新的Psd对象。

 const psdFile = Psd . parse ( myBuffer ) ;

遍历层

Psd对象包含Layer和Group （IE图层组）对象的树。

• Psd对象提供了一个children属性，该属性是顶级Layer和Group s的数组。
• 每个Group对象都提供一个children属性，该属性是属于当前层组下方的Layers和Group S的数组。
• Psd ， Group和Layer对象提供了一个type字段，可用于区分每种类型：

 import Psd , { Node } from "@webtoon/psd" ;

// Recursively traverse layers and layer groups
function traverseNode ( node : Node ) {
  if ( node . type === "Layer" ) {
    // Do something with Layer
  } else if ( node . type === "Group" ) {
    // Do something with Group
  } else if ( node . type === "Psd" ) {
    // Do something with 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 ) ;
}

解码图像数据

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

请注意，要使Psd.prototype.composite()起作用，需要将PSD/PSB文件保存在“最大化兼容性”模式中。否则，它将不会返回数据。您可以在Preferences > File Handling > File Compatibility > Maximize PSD and PSB File Compatibility中启用它

 // Decode the pixel data of the entire image
pixelData = await psd . composite ( ) ;

// Extract the pixel data of a layer, with all layer and layer group effects applied
// (currently, only the opacity is supported)
layerPixelData = await layer . composite ( ) ;

// Extract the pixel data of a layer, with only the layer's own effects applied
layerPixelData = await layer . composite ( true , false ) ;

// Extract the pixel data of a layer, without any effects
layerPixelData = await layer . composite ( false ) ; 

执照

@webtoon/psd根据MIT许可发布。

 Copyright 2021-present NAVER WEBTOON

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.