toDataURL 返回带有大量“A”的错误值答案

【问题标题】：toDataURL returns wrong value with a lot of "A"toDataURL 返回带有大量“A”的错误值
【发布时间】：2015-04-28 09:08:17
【问题描述】：

我正在使用toDataURL() 获取base64 图像。

所以在我的 js 中我这样做：

var canvas    = document.createElement ( 'CANVAS' );
canvas.width  = editImages.imgMgrObj.IMreal[0];
canvas.height = editImages.imgMgrObj.IMreal[1];
var context   = canvas.getContext ( '2d' );
context.drawImage ( editImages.imgMgrObj.getIMG ( ), 0, 0 );

然后我使用以下参数执行 ajax POST 请求：img=' + canvas.toDataURL("image/png")' 作为参数，以便将图像保存在数据库中。
editImages 是一个文件对图像进行一些操作。
editImages.imgMgrObj.getIMG ( ) 提供图像的链接。

问题是这个函数给了我错误的base64，我的字符串中有很多A，像这样：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA7YAAAIWCAYAAABjkRHCAAAHxklEQVR4nO3BMQEAAADCoPVPbQZ/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

但是这个bug很少出现，在firefox 36中我没有这个bug，它只出现在firefox 37.0.2的最后一个版本上，并且只出现在windows上而不是Linux上，有人知道为什么吗？？

【问题讨论】：

标签： javascript canvas

【解决方案1】：

当您调用 ctx.drawImage() 时，您的图像似乎未完全加载。
这就是为什么你得到所有这些A。

解决方案是在加载图像时调用画布函数：

var img = new Image();
img.onload= function(){
    ctx.drawImage(img, 0,0);
    var data = canvas.toDataURL();
    }
img.src="path/to/your.image";
}

【讨论】：

没关系，问题解决了，问题很好，我尝试在我的图像加载之前获取 toDataURL() 非常感谢您的帮助！