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

【问题标题】：Resizing base64 image does not work in Firefox调整 base64 图像大小在 Firefox 中不起作用
【发布时间】：2015-07-06 14:30:05
【问题描述】：

我尝试了很多不同的方法，但是在 Firefox 中，当我第一次调整大小时，它返回一个空白图像：

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

这是我的函数，我这样称呼它：

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

【问题讨论】：

代码第一次执行时你的图片加载了吗？（图像会有一个 onload 事件）
我的图片是 cursorImage 并且我在 onload 上有调用函数，所以应该加载它
哎呀，我的错。控制台在绘制图像调用之前直接说画布宽度/高度是什么？
没有设置宽度和高度，我只得到了我发送的宽度和高度的空白图像

标签： javascript jquery firefox canvas base64

【解决方案1】：

我遇到了和你完全相同的问题，当我在“onload”回调之外创建画布时，问题就消失了，如下所示：

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

我还是 JavaScript 的初学者，我无法解释它为什么会起作用......

【讨论】：