Javascript Base64 图像数据是 corrupt/invalid？

Question

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

但是，我只使用了 returns 图像表示的一半 it/partially/corrupt/invalid。我尝试使用 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

您只需将 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 函数上的 canvas，一切都很好。问题是您在设置 onload 处理程序后立即尝试获取图像数据（即 c.toDataURL），而不是在它具有运行之后，所以我会说 canvas 没有当您尝试通过 c.toDataURL();

获取图像时完成绘制图像

根据这个Fiddle

我所做的只是将 toDataURL 移动到 onload 函数中，所以现在 canvas 绘制图像后运行s

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 作为新选项卡中的图像，最简单的测试方法。

另外关于你之前得到的，我实际上并不认为你得到的是 corrupt/partial/invalid base64，因为每次初始代码运行，它都返回相同的 base64。这实际上是全白图像的有效 base64，即在绘制任何内容之前的空白 canvas 元素。

Javascript Base64 图像数据是 corrupt/invalid？

Javascript Base64 Image Data is corrupt/invalid?

html

javascript

jquery

base64

image