psd
Release 0.4.0
Ein leichtes Adobe Photoshop .psd/.psb-Datei-Parser in TypeScript mit null Abhängigkeit für Webbrowser und NodeJs
@webtoon/psd ist ein schneller, leichtgewichtiger Parser für Adobe Photoshop PSD/PSB -Dateien. Es verwendet Standardfunktionen (ES2015+) und kann sowohl in Webbrowsern als auch in node.js. verwendet werden. Es zieht keine Abhängigkeiten ein und macht es kleiner (~ 100 KIB Minified) als andere PSD-Parser (AG-PSD: 200 KIB, PSD.JS: 443 KIB). Es verwendet WebAssembly, um die Dekodierungsbilddaten zu beschleunigen.
| Chrom | Firefox | Safari | Rand | Knoten |
|---|---|---|---|---|
| 57 | 52 | 11 | 79 | 12 |
*Internet Explorer wird nicht unterstützt
$ npm install @webtoon/psdSie können Benchmarks für @webtoon/psd in Ihrem Browser ausführen.
.psb ) @webtoon/psd wird als reines ECMascript -Modul bereitgestellt.
Schauen Sie sich die Live -Demo (Quellcode) für Webbrowser an.
@webtoon/psd muss mit einem Bundler wie Webpack oder Rollup gebündelt werden.
@webtoon/psd liest eine PSD -Datei als ArrayBuffer . Sie können FileReader oder File verwenden, um eine PSD -Datei zu laden:
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 ) ;
} ) ;Für die Leistung empfehlen wir eher PSD -Dateien in einem Webwork als in einem Haupt -Thread.
Schauen Sie sich den Quellcode für das Beispiel node.js für den Webbrowser an.
@webtoon/psd unterstützt den Buffer node.js nicht. Sie müssen den zugrunde liegenden ArrayBuffer ausdrücklich liefern.
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 ) ; Da @webtoon/psd als ES -Modul bereitgestellt wird, müssen Sie dynamische import() oder einen Bundler verwenden, um es in CommonJS -Code auszuführen:
const Psd = await import ( "@webtoon/psd" ) ; Diese Bibliothek bietet die Psd -Klasse als Standard -Export.
Psd.parse(ArrayBuffer) nimmt einen ArrayBuffer mit einer PSD- oder PSB -Datei und gibt ein neues Psd -Objekt zurück.
const psdFile = Psd . parse ( myBuffer ) ; Ein Psd -Objekt enthält einen Baum mit Layer und Group (dh Schichtgruppen).
Psd -Objekt bietet eine children , bei der es sich um eine Reihe von Layer und Group der obersten Ebene handelt.Group bietet eine children , bei der es sich um eine Reihe von Layers und Group handelt, die sofort unter die aktuelle Schichtgruppe gehören.Psd , Group und Layer liefern ein type , das verwendet werden kann, um jeden Typ zu unterscheiden: 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 ) ; Das Psd -Objekt liefert auch die layers -Eigenschaft, die ein Array aller Layer S im Bild ist (einschließlich verschachtelter).
for ( const layer of psdFile . layers ) {
doSomething ( layer ) ;
} Verwenden Sie Psd.prototype.composite() und Layer.prototype.composite() um die Pixelinformationen für das gesamte Bild oder eine einzelne Ebene zu dekodieren.
Beachten Sie, dass Psd.prototype.composite() zu funktionieren, PSD/PSB -Dateien müssen im Modus "Kompatibilität maximieren" gespeichert werden. Andernfalls gibt es keine Daten zurück. Sie können es in Preferences > File Handling > File Compatibility > Maximize PSD and PSB File Compatibility aktivieren
// 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 wird unter der MIT -Lizenz veröffentlicht.
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.
