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

Javascript Base64 Image Data is corrupt/invalid?

本文关键字：无效 已损坏 数据 Base64 图像 Javascript      更新时间：2023-09-26

我基本上是试图通过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字符串似乎不正确：如中所示，该字符串要么是部分形成的，要么全部无效。我似乎无法将其转换回图像。

我做错了什么？

我认为您可能遇到了一个小的时间问题。您从所选文件创建图像，然后在onload函数中将其绘制到画布上，一切都很好。问题是，你试图在设置加载处理程序后立即获取imageData（即c.toDataURL），而不是在它运行后，所以我想说，当你试图通过c.toDataURL（）获取图像时，画布还没有完成绘制；

按照Fiddle

我所做的只是在onload函数中移动toDataURL，所以现在它在画布绘制完图像后运行

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，即在上面绘制任何东西之前的空白画布元素。

您只需要将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复制到浏览器的搜索栏中以加载图像。

相关文章：