Question

我正在使用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 );

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

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

~~但是这个bug很少发生，在firefox 36中我没有这个bug，它只出现在firefox 37.0.2的最后一个版本上，而且只在不在Linux上的windows上，任何人都知道为什么??~~

Answer 1

当您拨打ctx.drawImage()时，听起来您的图片并未完全加载这就是为什么你得到所有A。

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

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

toDataURL返回错误的值，包含大量“A”

1 个答案: