Estoy tratando de combinar capas de imágenes en una sola imagen. Funciona bien cuando solo tengo un método para obtener la imagen, luego otro y los superpongo. El problema es que necesito teñir la imagen antes de dibujarla y deben dibujarse en un orden determinado. Cuando introduje la biblioteca Sharp para teñir imágenes en un búfer y luego cargar el búfer y dibujar, las cosas comenzaron a dibujarse fuera de servicio

aquí está el código

 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); } }

Si solo hay una llamada en espera, por ejemplo, solo cargo la imagen de esta manera

 const image = await loadImage(path);

no hay ningún problema

una segunda solución que puedo encontrar es simplemente usar sharp para cargar la imagen en un búfer, pero de alguna manera necesito convertir ese búfer en una imagen o lienzo para este método

 ctx.drawImage( image, _layer.position.x, _layer.position.y, _layer.size.width, _layer.size.height );