Help! I'm trying to combine images using canvas but the output always comes out as a blank box. I can't figure out what is going wrong, my code is below:
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();
Solved my issue: Can not just image data directly from a URL, I needed to load/buffer it first. Solved below with 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();