Javascript Base64图像数据已损坏/无效？

Question

我基本上是想通过HTML输入选择图像，然后通过Javascript接收图像并获取其Base64 / Image Data字符串。

但是，我使用的代码仅返回一半/部分/损坏/无效的图像表示形式。 我尝试使用在线工具转换它返回的base64字符串，它只是返回了一个空白图像（表示：损坏的base64表示形式）

这是我的Javascript代码：

 var c = document.createElement('canvas');
    var ctx = c.getContext('2d');

    var img = new Image;
    img.src = URL.createObjectURL(e.target.files[0]);
    img.onload = function () {
        c.width = img.width;
        c.height = img.height;
        ctx.drawImage(img, 0, 0);
    }

    var imageData = c.toDataURL('image/png');
    alert(imageData);

这是一个JSFiddle。 http://jsfiddle.net/t2mcr3Lr/1/

如您所见，base64字符串似乎不正确：例如，该字符串看起来是部分形成的，或者全部无效。 我似乎无法将其转换回图像。

我究竟做错了什么？

Answer 1

您只需要将toDataURL()代码放入img.onload事件处理程序中，因为您当前正在尝试获取图像的数据URL，然后才有机会完全加载它。

 // Full code from provided jsFiddle link var input = document.getElementById('input'); input.addEventListener('change', handleFiles); function handleFiles(e) { var c = document.createElement('canvas'); var ctx = c.getContext('2d'); var img = new Image; img.src = URL.createObjectURL(e.target.files[0]); img.onload = function () { c.width = img.width; c.height = img.height; ctx.drawImage(img, 0, 0); var imageData = c.toDataURL('image/png'); console.log(imageData); } } 

将上面显示的数据URL复制到浏览器的搜索栏中以尝试加载图像，以尝试上述方法。

Answer 2

我认为您可能遇到了一个小的计时问题。 您正在从所选文件创建图像，然后将其绘制到onload函数的画布上，一切都很好。 问题是您要在设置onload处理程序后立即获取imageData（iectoDataURL），而不是在运行后立即获取，因此我想说当您尝试通过c获取图像时画布尚未完成绘制。 toDataURL（）;

按照这个小提琴

我所做的只是将toDataURL移动到onload函数内部，因此现在它在画布绘制图像后运行

var c = document.createElement('canvas');
var ctx = c.getContext('2d');

var img = new Image;
img.src = URL.createObjectURL(e.target.files[0]);
img.onload = function () {
    c.width = img.width;
    c.height = img.height;
    ctx.drawImage(img, 0, 0);
    var imageData = c.toDataURL('image/png');
    console.log(imageData);
    alert(imageData);
}

我还添加了一个console.log，至少与chrome中一样，如果您将URL登录到控制台，则可以单击它，然后查看chrome是否实际上在新选项卡中将数据URL作为图像打开，这是最简单的方法测试一下。

同样，关于您之前得到的内容，我实际上并不认为您根本在损坏/部分/无效的base64，因为每次运行初始代码时，它都会返回相同的base64。 这实际上是全白图像的有效base64，即在画布上绘制任何内容之前的空白canvas元素。