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

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

// 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);
    }
}

尝试将上面吐出的数据网址复制到浏览器的搜索栏中以加载图片。

Answer 2

我认为你可能会遇到一个小问题。您正在从所选文件创建图像，然后将其绘制到onload函数的画布上，一切都很好。问题是你试图在设置onload处理程序之后立即获取imageData（iectoDataURL），而不是在它运行之后，所以我会说当你试图获取它时画布还没有完成绘制图像通过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是否实际打开数据网址作为新标签中的图像，最简单的方法来测试它。

另外根据你之前得到的内容，我实际上并不认为你得到了腐败/部分/无效的base64，因为每次初始代码运行时，它都会返回相同的base64。这实际上是全白图像的有效base64，即在绘制任何内容之前的空白画布元素。

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

2 个答案: