psd
Release 0.4.0
軽量のAdobe Photoshop .psd/.psbファイルパーサーinpyscriptのWebブラウザーとnodejsのゼロ依存性を備えたParser
@webtoon/psd Adobe Photoshop PSD/PSBファイルの高速で軽量のパーサーです。標準（ES2015+）機能を使用し、Webブラウザーとnode.jsの両方で使用できます。ゼロ依存関係を引き出し、他のPSDパーサー（Ag-PSD：200 KIB、PSD.JS：443 KIB）よりも小さく（〜100キブのマイニル）。 WebAssemblyを使用して、画像データのデコードをスピードアップします。
| クロム | Firefox | サファリ | 角 | ノード |
|---|---|---|---|---|
| 57 | 52 | 11 | 79 | 12 |
*インターネットエクスプローラーはサポートされていません
$ npm install @webtoon/psdブラウザで @webtoon/psdのベンチマークを実行できます。
.psb ）をサポートする@webtoon/psdは、純粋なECMAScriptモジュールとして提供されます。
Webブラウザ用のライブデモ（ソースコード）をご覧ください。
@webtoon/psd Webpackやロールアップなどのバンドラーにバンドルする必要があります。
@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 ) ;
} ) ;パフォーマンスについては、メインスレッドではなくWebワーカーにPSDファイルを解析することをお勧めします。
Webブラウザーのnode.jsの例のソースコードをご覧ください。
@webtoon/psdはnode.js Bufferをサポートしていません。基礎となる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()またはバンドラーを使用してCommonJSコードで実行する必要があります。
const Psd = await import ( "@webtoon/psd" ) ; このライブラリは、デフォルトのエクスポートとしてPsdクラスを提供します。
Psd.parse(ArrayBuffer) PSDまたはPSBファイルを含むArrayBufferを取り、新しいPsdオブジェクトを返します。
const psdFile = Psd . parse ( myBuffer ) ;Psdオブジェクトには、 LayerとGroup （IEレイヤーグループ）オブジェクトのツリーが含まれています。
Psdオブジェクトは、トップレベルのLayerとGroup Sの配列であるchildren Propertyを提供します。Groupオブジェクトは、現在のレイヤーグループのすぐ下に属する一連のLayersとGroupの配列であるchildrenプロパティを提供します。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オブジェクトは、画像内のすべてのLayer sの配列であるlayersプロパティも提供します（ネストされたものを含む）。
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.
