Help on placedLayer canvas preview

[labsforge]

Hi @Agamnentzar, i'm having here some difficulties setting the canvas on the layer that holds the placedlayer. I was able to generate all the transformations and for debugging I exported them. I'm using the createCanvasFromData(buffer) from your helpers. The psd now is too big and I have to share it here (layers canvas in the zip): https://file.io/05DzhF4GYS29

const photoUuid = crypto.randomUUID();
const linkedFile: LinkedFile = {
  id: photoUuid,
  name: photo.name,
  data: fs.readFileSync(photo.localPath),
};
linkedFiles.push(linkedFile);

const photoLayer: Layer = {
  name: photo.name,
  clipping: true,
  placedLayer: {
    id: photoUuid,
    placed: framePhoto.nodeUid,
    type: 'raster',
    transform: getCropTransform(framePhoto),            
    width: framePhoto.crop.width,
    height: framePhoto.crop.height,
  },
  canvas: createCanvasFromData(buffer),
  top: framePhoto.y + framePhoto.borderThickness,
  left: framePhoto.x + framePhoto.borderThickness,
}

I don't know what I'm doing wrong.

[Agamnentzar]

You need to use node-canvas library, create empty canvas, load an image and draw it on the canvas with correct transform. node-canvas has regular HTML5 canvas API which you can read about here: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

See here for some ways to create canvas/load image in node-canvas: https://github.com/Automattic/node-canvas#utility-methods since that's different than the standard API.

You should be able to draw the image with just using drawImage if your transform is just scaling and moving the image around.

[labsforge]

I replaced createCanvasFromData with my own implementation and its working now 🚀🚀🚀

thanks for the hint 🙏