@webtoon/psd
A lightweight Adobe Photoshop .psd/.psb file parser in typescript with zero-dependency for WebBrowser and NodeJS
Browser Support
| Chrome | Firefox | Safari | Internet Explorer |
|---|---|---|---|
| 38 | 20 | 10.1 | Not Supported |
Installation
$ npm install @webtoon/psd
Features
✅
Supported
- Support large format (
.psb) - Image / Layer information (size, offset, etc.)
- Image / Layer pixel data
- Unicode layer names
- Image / Layer opacity
- Text layers string value
- Guides
- Slices
🚧
Work in progress
- Layer effects (shadow, overlays, etc.)
❌
Unsupported
- Photoshop metadata not directly related to the image
Usage
@webtoon/psd is provided as a pure ECMAScript module.
Web Browsers
Check out the live demo and the the source for web browser.
@webtoon/psd must be bundled with a bundler such as Webpack or Rollup.
@webtoon/psd reads a PSD file as an ArrayBuffer. You can use FileReader or File to load a PSD file:
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 imageData = new ImageData(
psdFile.composite(),
psdFile.width,
psdFile.height
);
canvasElement.width = psdFile.width;
canvasElement.height = psdFile.height;
context.putImageData(imageData, 0, 0);
document.body.append(canvasElement);
});
For performance, we recommend parsing PSD files in a Web Worker rather than the main thread.
NodeJS
@webtoon/psd does not support the Node.js Buffer. You must explicitly supply the underlying 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);
Since @webtoon/psd is provided as an ES module, you must use dynamic import() or a bundler to run it in CommonJS code:
const Psd = await import("webtoon/psd.ts");
API Docs
This library provides the Psd class as the default export.
Opening a file
Psd.parse(ArrayBuffer) takes an ArrayBuffer containing a PSD or PSB file and returns a new Psd object.
const psdFile = Psd.parse(myBuffer);
Traversing layers
A Psd object contains a tree of Layer and Group (i.e. layer group) objects.
- The
Psdobject provides achildrenproperty, which is an array of top-levelLayers andGroups. - Each
Groupobject provides achildrenproperty, which is an array ofLayersandGroups that belong immediately under the current layer group .
import Psd, {Group, Layer, Node} from "@webtoon/psd";
// Recursively traverse layers and layer groups
function traverseNode(node: Node) {
if (node instanceof Group) {
for (const child of node.children) {
traverseNode(child);
}
} else if (node instanceof Layer) {
// Do something with layer
} else {
throw new Error("Invalid node type");
}
}
for (const node of psdFile.children) {
traverseNode(node);
}
The Psd object also provides the layers property, which is an array of all Layers in the image (including nested).
for (const layer of psdFile.layers) {
doSomething(layer);
}
Retrieving image data
Use Psd.prototype.composite() and Layer.prototype.composite() to retrieve the pixel information for the entire image or an individual layer.
// Extract the pixel data of the entire image
pixelData = psd.composite();
// Extract the pixel data of a layer, with all layer and layer group effects applied
// (currently, only the opacity is supported)
layerPixelData = layer.composite();
// Extract the pixel data of a layer, with only the layer's own effects applied
layerPixelData = layer.composite(true, false);
// Extract the pixel data of a layer, without any effects
layerPixelData = layer.composite(false);
License
@webtoon/psd is released under the MIT license.
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.
or am I looking somewhere wrong ?
39 Dec 8, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
1 Jan 29, 2022
1 Jan 3, 2022
46 Nov 24, 2022
925 Nov 27, 2022
4 Apr 24, 2022
10 Jan 8, 2023
31 Oct 24, 2022
16 Sep 16, 2022
59 Oct 8, 2022
11 Dec 28, 2022
155 Nov 25, 2022
7 Sep 13, 2022
69 Dec 25, 2022
2 Jul 3, 2022