psd

@webtoon/psd

Adobe Photoshop. photoshop .psd/.psb parser ใน typescript ที่มีการพึ่งพาศูนย์สำหรับเว็บเบราว์เซอร์และ nodejs

@webtoon/psd เป็นตัวแยกวิเคราะห์ที่รวดเร็วและมีน้ำหนักเบาสำหรับไฟล์ Adobe Photoshop PSD/PSB ใช้คุณสมบัติมาตรฐาน (ES2015+) และสามารถใช้ทั้งในเว็บเบราว์เซอร์และใน Node.Js. มันดึงการพึ่งพาเป็นศูนย์ทำให้เล็กลง (~ 100 kib minified) กว่าตัวแยกวิเคราะห์ PSD อื่น ๆ (AG-PSD: 200 kib, psd.js: 443 kib) มันใช้ WebAssembly เพื่อเพิ่มความเร็วในการถอดรหัสข้อมูลภาพ

การสนับสนุนเบราว์เซอร์

โครเมี่ยม	Firefox	ซาฟารี	ขอบ	โหนด
57	52	11	79	12

*ไม่รองรับ Internet Explorer

การติดตั้ง

$ npm install @webtoon/psd

เกณฑ์มาตรฐาน

คุณสามารถเรียกใช้เกณฑ์มาตรฐานสำหรับ @webtoon/psd ในเบราว์เซอร์ของคุณ

คุณสมบัติ

✅สนับสนุน

• รองรับรูปแบบขนาดใหญ่ ( .psb )
• ข้อมูลรูปภาพ / เลเยอร์ (ขนาด, ออฟเซ็ต ฯลฯ )
• ข้อมูลภาพ / เลเยอร์พิกเซล
• ชื่อเลเยอร์ Unicode
• ความทึบของรูปภาพ / เลเยอร์
• เลเยอร์ข้อความค่าสตริง
• คำแนะนำ
• ชิ้น

- ทำงานระหว่างดำเนินการ

• เอฟเฟกต์เลเยอร์ (เงา, ซ้อนทับ ฯลฯ )

ไม่ได้รับการสนับสนุน

• Metadata Photoshop ไม่เกี่ยวข้องโดยตรงกับภาพ

การใช้งาน

@webtoon/psd มีให้เป็นโมดูล ecmascript บริสุทธิ์

เว็บเบราว์เซอร์

ตรวจสอบการสาธิตสด (ซอร์สโค้ด) สำหรับเว็บเบราว์เซอร์

@webtoon/psd จะต้องรวมกับ bundler เช่น webpack หรือ rollup

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

สำหรับประสิทธิภาพเราขอแนะนำให้แยกไฟล์ PSD ในเว็บผู้ปฏิบัติงานมากกว่าเธรดหลัก

nodejs

ตรวจสอบซอร์สโค้ดสำหรับตัวอย่าง node.js สำหรับเว็บเบราว์เซอร์

@webtoon/psd ไม่รองรับ Buffer node.js คุณต้องจัดหา 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 เพื่อเรียกใช้ในรหัส CommonJS:

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

เอกสาร API

ไลบรารีนี้ให้คลาส Psd เป็นการส่งออกเริ่มต้น

การเปิดไฟล์

Psd.parse(ArrayBuffer) ใช้ ArrayBuffer ที่มีไฟล์ PSD หรือ PSB และส่งคืนวัตถุ Psd ใหม่

 const psdFile = Psd . parse ( myBuffer ) ;

การสำรวจเลเยอร์

วัตถุ Psd มีต้นไม้ของ Layer และ Group (เช่นกลุ่มเลเยอร์)

• วัตถุ Psd จัดเตรียมทรัพย์สิน children ซึ่งเป็นอาร์เรย์ของ Layer ระดับบนสุด S และ 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.