@webtoon/psd Documentation
repository·main·Indexed 23 days ago
https://github.com/webtoon/psdA lightweight, zero-dependency TypeScript parser for Adobe Photoshop PSD and PSB files, compatible with both browser and Node.js environments. It provides the Psd class as a primary entrypoint to access document structures, including layers, groups, and slices. The library supports retrieving layer properties, decoding grayscale masks via userMask() and realUserMask(), and handling Additional Layer Info (ALI) blocks, descriptors, and channel compression types.
What's inside @webtoon/psd
- @webtoon/psd is a fast, lightweight, and zero-dependency TypeScript parser for Adobe Photoshop .psd and .psb files. It is designed to work in both web browsers and Node.js environments using standard ES2015+ features.
Understand Additional Layer Info (ALI) block types
mainIn
@webtoon/psd, Additional Layer Info (ALI) blocks are categorized into three main types based on whether they are recognized by the parser:KnownAliBlock<Key>: A block that@webtoon/psdcan successfully parse. These must use a validAliKeyand have_isUnknownset tofalse.UnknownAliBlock: A block that the parser encountered but does not have a defined schema for. These contain the rawdataas aUint8Arrayand have_isUnknownset totrue.AliBlockBase: The underlying base interface for all blocks, containing thesignature("8BIM"or"8B64") and a 4-characterkeystring.
Understand SlicesResourceBlock structure
mainThe
SlicesResourceBlockrepresents the slice resource data within a PSD file. It is a union type that depends on the version of Photoshop used to create the file:- Version 6: Used by Photoshop 6.0 and 7.0. It contains bounding box coordinates (
boundTop,boundLeft,boundBottom,boundRight), asliceGroupName, and an array ofSliceEntryobjects. It may optionally include adescriptor. - Version 7 or 8: Used by Photoshop CS and later. These versions rely on a
descriptor(of typeVersionedDescriptor) to define the slice data.
Note that the versioning is non-linear: Photoshop 6.0-7.0 uses
version: 6, while CS and later useversion: 7or8.- Version 6: Used by Photoshop 6.0 and 7.0. It contains bounding box coordinates (
Understand Descriptor and VersionedDescriptor structures
mainIn PSD files, Descriptors are dictionary-like data structures used by Photoshop to store arbitrary key-value pairs. A
Descriptorconsists of aname, aclassId, and aMapofitemswhere keys are strings and values areDescriptorValueobjects.A
VersionedDescriptoris a wrapper around aDescriptorthat includes a fixeddescriptorVersion(currently16).Retrieve typed values with getDescriptorValueAsType()
mainUse
getDescriptorValueAsTypeto safely extract a value from aDescriptorby its key and cast it to a specificDescriptorValueType. This function ensures the key exists and the type matches the expected type.Throws:
MissingDescriptorKey: If the providedkeyis not found in the descriptor's items.UnexpectedDescriptorValueType: If the actual type of the value does not match the requestedvalueType.
export function getDescriptorValueAsType<Type extends DescriptorValueType>( descriptor: Descriptor, key: string, valueType: Type ): DescriptorValueWithType<Type>Parse a PSD file header with parseFileHeader()
mainTheparseFileHeaderfunction extracts the core metadata from a PSD or PSB file header using aDataView. It validates the file signature, version, reserved bytes, channel count, dimensions, bit depth, and color mode. If the data does not conform to the expected PSD specification, it throws specific error types (e.g.,InvalidSignature,InvalidVersion,InvalidPixelCount).Validate slice origin with matchSliceOrigin()
mainUse thematchSliceOrigin(origin: number)function to validate a numeric origin value against theSliceOriginenum. If the provided number does not correspond to a validSliceOrigin, the function throws anInvalidSliceOriginerror.Use the Layer class to access PSD layer properties
mainThe
Layerclass represents an individual layer within a PSD file. It provides access to spatial properties (width, height, top, left), visual properties (opacity, blendMode, isHidden, isTransparencyLocked), and layer-specific data like masks and text content.Key properties include:
name: The name of the layer.opacity: The layer's opacity (0-255).composedOpacity: The effective opacity calculated by multiplying the layer's opacity with its parent's opacity.text: Returns the text content if the layer is a text layer; otherwiseundefined.textProperties: ReturnsEngineDatafor text layers; otherwiseundefined.clipping: Returns theClippinginformation for the layer.additionalProperties: AccessesadditionalLayerPropertiesfrom the layer's properties.
Parse layer and mask information with parseLayerAndMaskInformation()
mainUse
parseLayerAndMaskInformationto extract the layer hierarchy, group information, and global additional layer properties from a PSD file's data view.This function processes the Layer and Mask Information section, which includes segments for
LayerInfo,GlobalLayerMaskInfo, andAdditionalLayerInfo. It returns aLayerAndMaskInformationSectionobject containing:layers: An array ofLayerFrameobjects representing individual layers.groups: An array ofGroupFrameobjects representing layer groups (folders).orders: An array of markers ('G','L', or'D') indicating the sequence of groups, layers, and dividers.globalAdditionalLayerInformation: Properties related to global layer masks.
Parse PSD file structure with getFileStructure()
mainUse
getFileStructureto perform an initial high-level parse of a PSD or PSB file buffer. This function parses the file header to determine the file version and then identifies the byte offsets and sizes for the major sections of the file.It returns a
FileStructureobject containingDataViewinstances for each section, allowing you to access specific parts of the file (like image data or layer information) without parsing the entire file at once.Get a FileVersionSpec by PsdVersion
mainUse thegetFileVersionSpecfunction to retrieve the appropriateFileVersionSpec(eitherPsdSpecorPsbSpec) based on a providedPsdVersion. This is useful when you need to determine the parsing strategy for a file once its version has been identified.Convert a LayerRecord to LayerProperties using createLayerProperties()
mainThecreateLayerPropertiesfunction transforms a rawLayerRecord(which contains low-level information likeadditionalLayerInfos) into a more accessibleLayerPropertiesobject. This helper flattens specific properties likelayerText,engineData, andmaskDatainto top-level fields and mapsadditionalLayerInfosinto a keyedadditionalLayerPropertiesobject for easier lookup.