调整base64图像的大小在Firefox中不起作用

Question

I tried many different ways, but in Firefox, when I resize the first time, it returns a blank image:

function imageToDataUri(img, width, height) {
 var canvas = document.createElement('canvas');
 ctx = canvas.getContext('2d');
 canvas.width = width;
 canvas.height = height;
 ctx.drawImage(img, 0, 0, width, height);
 setTimeout(function () {
   cursorimg = canvas.toDataURL();
 }, 500);
}

This is my function and I call it like this:

cursorImage.onload = function(){
  imageToDataUri(cursorImage, width, height);
}

Answer 1

I had the exact same issue as you, and the issue disappeared when I created the canva outside the "onload" callback, like this:

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
cursorImage.onload = function(){
    ctx.drawImage(img, 0, 0, width, height);
    cursorimg = canvas.toDataURL();
}

I'm still a beginner in JavaScript, I can't explain why it worked...