psd

@webtoon/psd

Um photoshop adobe leve .PSD/.PSB Analisador de arquivos no TypeScript com dependência zero para navegadores da Web e NodeJs

@webtoon/psd é um analisador rápido e leve para os arquivos Adobe Photoshop PSD/PSB. Ele usa recursos padrão (ES2015+) e pode ser usado tanto em navegadores da web quanto em node.js. Ele extrai dependências zero, tornando-as menores (~ 100 kib minificado) do que outros analisadores de PSD (AG-PSD: 200 KIB, PSD.JS: 443 KIB). Ele usa o WebAssembly para acelerar os dados da imagem de decodificar.

Suporte do navegador

Cromo	Firefox	Safári	Borda	Nó
57	52	11	79	12

*Internet Explorer não é suportado

Instalação

$ npm install @webtoon/psd

Benchmarks

Você pode executar benchmarks para @webtoon/psd no seu navegador.

Características

✅ Suporte

• Suporte ao grande formato ( .psb )
• Informações sobre imagem / camada (tamanho, deslocamento, etc.)
• Dados de pixel de imagem / camada
• Nomes de camada unicode
• Opacidade de imagem / camada
• Camadas de texto Valor da string
• Guias
• Fatias

? Trabalho em andamento

• Efeitos de camada (sombra, sobreposições, etc.)

Não suportado

• Metadados do Photoshop não diretamente relacionados à imagem

Uso

@webtoon/psd é fornecido como um módulo ECMAScript puro.

Navegadores da web

Confira a demonstração ao vivo (código fonte) para navegador da web.

@webtoon/psd deve ser agrupado com um empacotador como webpack ou rollup.

@webtoon/psd lê um arquivo PSD como um ArrayBuffer . Você pode usar FileReader ou File para carregar um arquivo 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 ) ;
} ) ;

Para desempenho, recomendamos analisar arquivos PSD em um trabalhador da web e não no thread principal.

Nodejs

Confira o código -fonte do exemplo node.js para navegador da web.

@webtoon/psd não suporta o Buffer node.js. Você deve fornecer explicitamente o ArrayBuffer subjacente.

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

Como @webtoon/psd é fornecido como um módulo ES, você deve usar o dinâmico import() ou um empurrador para executá -lo no código Commonjs:

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

API Docs

Esta biblioteca fornece a classe Psd como exportação padrão.

Abrindo um arquivo

Psd.parse(ArrayBuffer) pega um ArrayBuffer contendo um arquivo PSD ou PSB e retorna um novo objeto Psd .

 const psdFile = Psd . parse ( myBuffer ) ;

Camadas de travessia

Um objeto Psd contém uma árvore de objetos de Layer e Group (grupo de camada).

• O objeto Psd fornece uma propriedade children , que é uma variedade de Layer e Group de nível superior s.
• Cada objeto Group fornece uma propriedade children , que é uma variedade de Layers e Group que pertencem imediatamente ao atual grupo de camadas.
• Os objetos Psd , Group e Layer fornecem um campo type , que pode ser usado para discriminar cada tipo:

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

O objeto Psd também fornece a propriedade layers , que é uma matriz de todas Layer s na imagem (incluindo aninhadas).

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

Decodificação de dados da imagem

Use Psd.prototype.composite() e Layer.prototype.composite() para decodificar as informações do pixel para toda a imagem ou uma camada individual.

Observe que, para Psd.prototype.composite() funcionar, os arquivos PSD/PSB precisam ser salvos no modo "Maximize Compatibilidade". Caso contrário, não retornará dados. Você pode habilitá -lo em 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 ) ; 

Licença

@webtoon/psd é lançado sob a licença do 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.