psd

@ webtoon / psd

Un analyseur de fichier Adobe Photoshop.

@webtoon/psd est un analyseur rapide et léger pour les fichiers Adobe Photoshop PSD / PSB. Il utilise des fonctionnalités standard (ES2015 +) et peut être utilisé à la fois dans les navigateurs Web et dans Node.js. Il tire zéro dépendances, ce qui le rend plus petit (~ 100 kib minifié) que les autres analyseurs PSD (AG-PSD: 200 KIB, PSD.js: 443 KIB). Il utilise WebAssembly pour accélérer les données d'image de décodage.

Support de navigateur

Chrome	Incendier	Safari	Bord	Nœud
57	52	11	79	12

* Internet Explorer n'est pas pris en charge

Installation

$ npm install @webtoon/psd

Repères

Vous pouvez exécuter des repères pour @ webtoon / psd dans votre navigateur.

Caractéristiques

✅ Soutenu

• Soutenir le grand format ( .psb )
• Informations sur l'image / calque (taille, décalage, etc.)
• Données de pixels d'image / calque
• Noms de calques Unicode
• Opacité d'image / calque
• Valeur de chaîne de calculs de texte
• Guides
• Tranches

? Travail en cours

• Effets de la couche (ombre, superpositions, etc.)

Non pris en charge

• Les métadonnées Photoshop ne sont pas directement liées à l'image

Usage

@webtoon/psd est fourni en tant que module ECMascript pur.

Navigateurs Web

Consultez la démo en direct (code source) pour le navigateur Web.

@webtoon/psd doit être regroupé avec un bundler tel que WebPack ou Rollup.

@webtoon/psd lit un fichier PSD en tant que ArrayBuffer . Vous pouvez utiliser FileReader ou File pour charger un fichier 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 ) ;
} ) ;

Pour les performances, nous vous recommandons d'analyser les fichiers PSD chez un travailleur Web plutôt que le fil principal.

Nodejs

Consultez le code source de l'exemple Node.js pour le navigateur Web.

@webtoon/psd ne prend pas en charge le Buffer node.js. Vous devez fournir explicitement le ArrayBuffer sous-jacent.

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

Étant donné que @webtoon/psd est fourni en tant que module ES, vous devez utiliser Dynamic import() ou un bundler pour l'exécuter dans le code CommonJS:

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

Docs API

Cette bibliothèque fournit la classe Psd comme exportation par défaut.

Ouvrir un fichier

Psd.parse(ArrayBuffer) prend un ArrayBuffer contenant un fichier PSD ou PSB et renvoie un nouvel objet Psd .

 const psdFile = Psd . parse ( myBuffer ) ;

Couches traversant

Un objet Psd contient un arbre de Layer et Group (IE Layer Group) objets.

• L'objet Psd fournit une propriété children , qui est un tableau de Layer de niveau supérieur et Group S.
• Chaque objet Group fournit une propriété children , qui est un tableau de Layers et Group qui appartiennent immédiatement dans le groupe de couche actuel.
• Les objets Psd , Group et Layer fournissent un champ type , qui peut être utilisé pour discriminer chaque 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 ) ;

L'objet Psd fournit également la propriété layers , qui est un tableau de toutes Layer dans l'image (y compris imbriqué).

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

Décodage des données d'image

Utilisez Psd.prototype.composite() et Layer.prototype.composite() pour décoder les informations de pixel pour l'image entière ou une couche individuelle.

Notez que pour Psd.prototype.composite() , les fichiers PSD / PSB doivent être enregistrés en mode "maximiser la compatibilité". Sinon, il ne rendra aucune donnée. Vous pouvez l'activer dans 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 ) ; 

Licence

@webtoon/psd est publié sous la licence 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.