psd
Release 0.4.0
Легкий анализатор файла Adobe Photoshop .psd/.psb в TypeScript с нулевой зависимостью для веб-браузеров и Nodejss
@webtoon/psd - быстрый, легкий анализатор для файлов Adobe Photoshop PSD/PSB. Он использует стандартные (ES2015+) функции и может использоваться как в веб -браузерах, так и в Node.js. Он тянет в нулевых зависимостях, что делает его меньше (~ 100 киб, минимизированных), чем другие анализаторы PSD (AG-PSD: 200 киб, PSD.JS: 443 киб). Он использует Webassembly для ускорения декодирования данных изображений.
| Хром | Firefox | Сафари | Край | Узел |
|---|---|---|---|---|
| 57 | 52 | 11 | 79 | 12 |
*Internet Explorer не поддерживается
$ npm install @webtoon/psdВы можете запустить тесты для @webtoon/psd в вашем браузере.
.psb ) @webtoon/psd предоставляется как чистый модуль Ecmascript.
Проверьте Live Demo (исходный код) для веб -браузера.
@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 в веб -работнике, а не в основном потоке.
Проверьте исходный код для примера 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" ) ; Эта библиотека предоставляет класс Psd в качестве экспорта по умолчанию.
Psd.parse(ArrayBuffer) принимает ArrayBuffer , содержащий файл PSD или PSB, и возвращает новый объект Psd .
const psdFile = Psd . parse ( myBuffer ) ; Объект Psd содержит дерево Layer и Group (т.е. группа слоев).
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 S на изображении (включая вложенные).
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.
