Integrating with an open source image editor

[zavalzam]

I am working on trying to integrate this module into an open source image editor, miniPaint ( https://github.com/viliusle/miniPaint ). I am trying to get the basic functionality of taking each layer from the psd file and inserting it as a new layer in miniPaint. I am currently able to get all the metadata for each layer, however, I am struggling to figure out how to get the actual contents of the layer into it (for example, the image that the layer contains). Does anyone have any advice you have that could help me solve this, particularly involving data types/formatting and where/how to get it? Thanks.

[f2d]

// Example:

var PSD = require('psd');
var psd = PSD.fromDroppedFile(file);
var layer = psd.tree().children()[0].layer;
var image = layer.image;

// Get HTMLImageElement:
// This uses temporary canvas internally, and may be lossy due to premultiplied alpha.

var pngImageElement = image.toPng();

// Get ImageData (lossless):

var width = image.width();
var height = image.height();
var layerImageData = new ImageData(width, height);
layerImageData.data.set(image.pixelData);

// Get ImageData of layer mask:

var mask = layer.mask;
var maskImageData = new ImageData(mask.width, mask.height);
maskImageData.data.set(image.maskData);

// Actual usage may involve background fill with mask.defaultColor:
// This will fill all channels with the same byte, probably 0 or 255.

var maskFillColorData = new ImageData(width, height);
maskFillColorData.data.fill(mask.defaultColor);

var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;

var ctx = canvas.getContext('2d');
ctx.putImageData(maskFillColorData, 0,0);
ctx.putImageData(maskImageData, mask.left, mask.top);