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

Question

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

但是，我使用的代码仅返回图像的一半/部分/损坏/无效表示。我尝试使用 online tool 转换它返回的 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

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

按照这个Fiddle

我所做的只是将 toDataURL 移到 onload 函数内，所以现在它在 Canvas 绘制图像后运行

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 元素。