I'm having a very frustrating time with this problem. Im doing this in javascript/vue and the goal is to fetch multiple images from an amazon s3 bucket using axios, then draw each of the images onto a canvas allowing the user to download the canvas containing all the images. The function I wrote is as follows.
async exportImage() {
const canvas = document.createElement('canvas');
canvas.width = 1920;
canvas.height = 1080;
const ctx = canvas.getContext("2d");
let yaxis = 0;
let xaxis = 0;
for (const item of this.items) {
const response = await axios.get(item.imageUrl, {responseType:
'arraybuffer',withCredentials: false});
const base64 = new Buffer(response.data).toString('base64');
const img = new Image;img.src = 'data:image/png;base64,' + base64;
if (xaxis + img.width > canvas.width) {
xaxis = 0;yaxis += img.height;
ctx.moveTo(xaxis, yaxis);
}
ctx.drawImage(img,xaxis,yaxis);
xaxis += img.width;
}
const link = document.createElement('a');
link.download = \${item.name.replaceAll(' ', '')}.png\;
link.href = canvas.toDataURL();
link.click();
}
The problem: Randomly this will only draw some of the images but not all. If I have 14 images total it will sometimes draw all 14 and sometimes draw only 8. Never any other number of images. Just running the function with the same number of images over and over again will alternate how many are drawn. Any help would be appreciated. Thank you.
