psd

@webtoon/psd

Adobe Photoshop .psd/.psb file parser yang ringan di TypeScript dengan ketergantungan nol untuk browser web dan nodeJS

@webtoon/psd adalah parser yang cepat dan ringan untuk file Adobe Photoshop PSD/PSB. Ini menggunakan fitur standar (ES2015+) dan dapat digunakan baik di browser web dan di Node.js. Ini menarik ketergantungan nol, membuatnya lebih kecil (~ 100 kib minified) daripada parser PSD lainnya (AG-PSD: 200 Kib, Psd.js: 443 kib). Menggunakan WebAssembly untuk mempercepat decoding data gambar.

Dukungan Browser

Chrome	Firefox	Safari	Tepian	Node
57	52	11	79	12

*Penjelajah internet tidak didukung

Instalasi

$ npm install @webtoon/psd

Tolok ukur

Anda dapat menjalankan tolok ukur untuk @webtoon/psd di browser Anda.

Fitur

✅ didukung

• Dukung format besar ( .psb )
• Informasi gambar / lapisan (ukuran, offset, dll.)
• Data piksel gambar / lapisan
• Nama Lapisan Unicode
• Opacity gambar / lapisan
• Lapisan Teks Nilai String
• Pemandu
• Irisan

? Bekerja dalam proses

• Efek lapisan (bayangan, overlay, dll.)

Tidak didukung

• Metadata Photoshop tidak terkait langsung dengan gambar

Penggunaan

@webtoon/psd disediakan sebagai modul ecmascript murni.

Browser web

Lihatlah demo langsung (kode sumber) untuk browser web.

@webtoon/psd harus dibundel dengan bundler seperti webpack atau rollup.

@webtoon/psd membaca file PSD sebagai ArrayBuffer . Anda dapat menggunakan FileReader atau File untuk memuat 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 ) ;
} ) ;

Untuk kinerja, kami merekomendasikan parsing file PSD dalam pekerja web daripada utas utama.

NodeJS

Lihat kode sumber untuk contoh Node.js untuk browser web.

@webtoon/psd tidak mendukung Buffer Node.js. Anda harus secara eksplisit memasok ArrayBuffer yang mendasarinya.

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

Karena @webtoon/psd disediakan sebagai modul ES, Anda harus menggunakan import() atau bundler untuk menjalankannya dalam kode CommonJS:

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

API Docs

Perpustakaan ini menyediakan kelas Psd sebagai ekspor default.

Membuka file

Psd.parse(ArrayBuffer) mengambil ArrayBuffer yang berisi file PSD atau PSB dan mengembalikan objek Psd baru.

 const psdFile = Psd . parse ( myBuffer ) ;

Melintasi lapisan

Objek Psd berisi pohon Layer dan Group (yaitu grup lapisan).

• Objek Psd menyediakan properti children , yang merupakan berbagai Layer tingkat atas dan Group .
• Setiap objek Group menyediakan properti children , yang merupakan berbagai Layers dan Group yang dimiliki segera di bawah kelompok layer saat ini.
• Objek Psd , Group , dan Layer menyediakan bidang type , yang dapat digunakan untuk membedakan setiap jenis:

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

Objek Psd juga menyediakan properti layers , yang merupakan array dari semua Layer dalam gambar (termasuk bersarang).

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

Decoding Data Gambar

Gunakan Psd.prototype.composite() dan Layer.prototype.composite() untuk mendekode informasi piksel untuk seluruh gambar atau lapisan individual.

Perhatikan bahwa untuk Psd.prototype.composite() berfungsi, file PSD/PSB perlu disimpan dalam mode "Maksimalkan Kompatibilitas". Kalau tidak, itu tidak akan mengembalikan data. Anda dapat mengaktifkannya di 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 ) ; 

Lisensi

@webtoon/psd dirilis di bawah lisensi 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.