search

Agamnentzar / ag-psd

Javascript library for reading and writing PSD files
Other
501 stars 66 forks source link

How to apply global mask to each layer and export base64 or png image #111

Closed beerus266 closed 6 months ago

beerus266 commented 2 years ago

I found this interesting library, but I get an issue when try to apply global mask to each children layer. This is my PSD file. I have a folder contain a mask, inside this folder has layers. If Disable mask layer, all children layers will be normal, no crop. Link this: image

But when Enable mask layer, the layers will be crop. My expect: image

I am coding a own project using both ag-psd and psd.js library to read file PSD to export all layers to base64 or png image. Export every normal layers is OK, but I haven't solve above situation yet. Can anyone help me ? Thanks a lot

Agamnentzar commented 2 years ago

The PSD file contains original, unmasked bitmaps for each layer and the mask. The masking itself is dome by photoshop when you open the file. If you want masked result you need to use canvas from layer.mask.canvas field on the group layer to mask the layer yourself. It should be easy as it's just iterating over all pixels and multiplying the layer alpha channel pixels by mask color channel pixels.

beerus266 commented 2 years ago

I am not clear what you means. Please, write a example code for me. It can be ease to understand. Please ?

jaankoppe commented 2 years ago

I am not clear what you means. Please, write a example code for me. It can be ease to understand. Please ?

@beerus266 I think it would be wise for you to start from the basics of pixel manipulation in canvas and then move on from there: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

It's nothing to do with this library, but with image manipulation in general.