¡Ayuda! Estoy tratando de combinar imágenes usando un lienzo, pero la salida siempre aparece como un cuadro en blanco. No puedo entender qué está saliendo mal, mi código está a continuación:
const Canvas = require('canvas'); const theLayers=['https://raw.githubusercontent.com/Iceee1000/SpaceVizsla/main/MediaAssets/pixelVizsla/testing_01.png', 'https://raw.githubusercontent.com/Iceee1000/SpaceVizsla/main/MediaAssets/pixelVizsla/B_02.png', 'https://raw.githubusercontent.com/Iceee1000/SpaceVizsla/main/MediaAssets/pixelVizsla/testing_02.png']; //not-working function to combine multiple layers of images from the web. const CombineLayers = async(layers) => { console.log('combining layers') let canvas=Canvas.createCanvas(250, 250); let context=canvas.getContext('2d'); for (let layer of layers){ var img = new Image(); img.origin = 'anonymous'; img.src = layer; img.onload = function(){ context.drawImage(img, 0, 0, 250, 250); } } return canvas.toDataURL("image/png"); }; const dothings=async()=>{ const result= await CombineLayers(theLayers); console.log(result); } dothings();Resolvió mi problema: no puedo simplemente generar imágenes de datos directamente desde una URL, primero necesitaba cargarlos/almacenarlos. Resuelto a continuación con axios:
const Canvas = require('canvas'); const axios = require('axios') function getBase64(url) { return axios .get(url, { responseType: 'arraybuffer' }) .then(response => Buffer.from(response.data, 'binary').toString('base64')) } const theLayers=['https://imageURL.png', 'https://imageURL.png', 'https://imageURL.png']; const CombineLayers = async(layers) => { console.log('combining layers') let canvas=Canvas.createCanvas(250, 250); let context=canvas.getContext('2d'); for (let layer of layers){ const data = await getBase64(layer); let datastring='data:image/png;base64,'+data const img = await Canvas.loadImage(datastring); context.drawImage(img, 0, 0, 250, 250); } return canvas.toDataURL("image/png"); }; const dothings=async()=>{ const result= await CombineLayers(theLayers); console.log(result); } dothings();