In the course of developing a web service using 3DCG, we developed a library for efficiently editing PSD files with TypeScript.

The inefficiency of PSD editing in web service development

Among the various image formats capable of handling multiple layers, PSD stands out in that it is supported by many graphics applications; however, ways to edit PSD files with code on the web were lacking. As a result, when developing a web service using 3DCG, there was no way to edit textures automatically, which made it difficult to design an efficient way of operating the service.

A library for web development that covers every function needed to handle PSD files

Based on the published PSD file specification, we developed a PSD editing library for web development. It covers every function needed to handle PSD files on the web, from reading and writing binary files to image conversion and image compositing.

Binary reading

It reads the binary data of a PSD file and stores its data structure in memory. Alternatively, it converts an in-memory data structure into binary data to create a PSD file.

Building layer and folder structures

It structures the individual data stored in a PSD file and reproduces the actual layer structure. When there is no PSD file, it builds the layer structure through image editing on a web interface.

Image conversion to web formats

It converts the image represented in a PSD file into a format that can be viewed on the web. Because it generates a simple image, the image can be downloaded as is.

Converting layer and folder structures to PSD format

It converts the created layer and folder structure into a PSD-format file structure.

Binary writing

It writes out the created PSD file structure as actual binary data. This makes it possible to obtain a PSD file.