psd

@webtoon/psd

Adobe Photoshop .psd/.psb خفيفة الوزن ، محلل في TypeScript مع الاعتماد الصفر لمتصفحات الويب و Nodejs

@webtoon/psd هو محلل سريع وخفيف الوزن لملفات Adobe Photoshop PSD/PSB. يستخدم ميزات قياسية (ES2015+) ويمكن استخدامها في متصفحات الويب وفي Node.js. إنه يسحب تبعيات صفر ، مما يجعلها أصغر (~ 100 KIB MINISED) من محلات 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 )
• معلومات الصورة / الطبقة (الحجم ، الإزاحة ، إلخ)
• بيانات الصورة / طبقة بكسل
• أسماء طبقة يونيكود
• عتامة الصورة / الطبقة
• قيمة سلسلة طبقة النص
• أدلة
• شرائح

؟ العمل قيد التقدم

• تأثيرات الطبقة (الظل ، التراكبات ، إلخ)

غير مدعوم

• بيانات تعريف Photoshop لا تتعلق مباشرة بالصورة

الاستخدام

@webtoon/psd يتم توفيره كوحدة ecmascript النقية.

متصفحات الويب

تحقق من العرض التوضيحي المباشر (رمز المصدر) لمتصفح الويب.

@webtoon/psd يجب أن يتم تجميعها بمجموعة مثل 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 ، يجب عليك استخدام 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 (IE طبقة).

• يوفر كائن Psd خاصية children ، وهي مجموعة من Layer العليا Group S.
• يوفر كل كائن Group خاصية children ، وهي مجموعة من Layers Group التي تنتمي مباشرة تحت مجموعة الطبقة الحالية.
• توفر كائنات 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 يتم إصداره تحت رخصة معهد ماساتشوستس للتكنولوجيا.

 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.