1

I'm trying to combine layers of images into one image. It works fine when I have just one method to fetch the image then another and layers them together, The problem is I need to tint the image before I draw it and they have to be drawn in a certain order. When I introduced the Sharp library to tint images into a buffer and then load the buffer and draw things start to draw out of order

here is the code

const drawLayer = async (_layer, _edition) => {
  let element = _layer.elements[Math.floor(Math.random() * _layer.elements.length)];
  addAttributes(element, _layer);

  var path = `${_layer.location}${element.fileName}`;

  console.log("start " + path);
  const buffer = await sharp(`${_layer.location}${element.fileName}`).png().toBuffer();
  console.log("sharp done " + path);
  const image = await loadImage(buffer);
  console.log("load image done " + path);

  ctx.drawImage(
    image,
    _layer.position.x,
    _layer.position.y,
    _layer.size.width,
    _layer.size.height
  );
  console.log("saving edition " + _edition);
  saveLayer(canvas, _edition);
  console.log("\n\n");
};

function draw() {
  for (let i = 1; i <= edition; i++) {
    layers.forEach((layer) => {
      drawLayer(layer, i);
    });
    addMetadata(i);
    console.log("Creating edition " + i);
  }
}

If there is only one await call for example I just load the image this way

const image = await loadImage(path);

there is no problem

a second solution I can figure out is just use the sharp to load the image in a buffer but some how i need to turn that buffer back into either an image or canvas for this method

ctx.drawImage(
    image,
    _layer.position.x,
    _layer.position.y,
    _layer.size.width,
    _layer.size.height
  );
Brian
  • 4,328
  • 13
  • 58
  • 103

1 Answers1

0

I believe the issue is that drawLayer is a async function, which means you need to await the function before drawing the next layer. Howwever, according to my knowledge, Array.forEach does not support async functions, so you have to do this instead.

async function draw() {
    for (let i = 1; i <= edition; i++) {
        for (let layer of layers) {
             await drawLayer(layer, i);
        });
        addMetadata(i);
        console.log("Creating edition " + i);
    }
}

I think this might do the trick.

Kenneth Lew
  • 217
  • 3
  • 7
  • I think thats on the right track now i get ```await drawLayer(layer, i); ^^^^^ SyntaxError: await is only valid in async functions and the top level bodies of modules``` – Brian Aug 28 '21 at 21:21
  • Don't forget, since `draw` is also async, it returns a promise, so u have to do a `.then`, and i think that might be your problem. – Kenneth Lew Aug 28 '21 at 21:22