Question

我想将使用base64编码的data:image转换为普通图像文件。到目前为止，我的代码看起来像这样：

this.toDataURL = function() {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = innerWidth;
    canvas.height = innerHeight;
    ctx.drawImage(layer0, 0, 0);
    ctx.drawImage(layer1, 0, 0);
    ctx.drawImage(layer2, 0, 0);
    var url = canvas.toDataURL('image/png');
    document.getElementById('canvascontent').value = url;
};

如您所见，它会创建一个DataUrl，然后在输出中显示（#cancascontent）。最终输出看起来像这样：

data:image/png;base64,iVBORw0KGgo.................

我的问题是我需要解码才能上传图片。我的目标是我的javascript代码在新窗口中显示图像，如“普通”图像文件。例如。像这样：

http://example.com/images/pro_js_3e.png

如何解码base64图像？

Answer 1

您可以将画布转换为Blob，然后上传。

要转换为Blob，请尝试以下脚本：https://github.com/blueimp/JavaScript-Canvas-to-Blob

然后，您可以使用canvas.toBlob代替canvas.toDataURL。

然后要上传它，您需要使用FormData

canvas.toBlob(function(blob){
    var form = new FormData(),
        request = new XMLHttpRequest();

    form.append("image", blob, "filename.png");
    request.open("POST", "/upload", true);
    request.send(form);
}, "image/png");

这是未经测试的，但应该有效。

Answer 2

所以我认为你不能在上传之前从base64转换为二进制文件（可能有一种方法，但它可能很复杂）。您将其作为常规图像链接提供的最后要求意味着您必须将其存储在服务器的某个位置。这意味着无论你做什么，你都必须上传。

鉴于此，我对最简单的解决方案的看法是POST你的base64并让服务器对其进行解码，存储并提供服务。

Answer 3

https://github.com/blueimp/JavaScript-Canvas-to-Blob的代码有点长。

我的dataURLtoBlob（）函数代码要短得多。

将dataURL转换为blob，然后使用FormData和ajax发送。

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

var dataurl = canvas.toDataURL('image/png'); //canvas to png dataurl
//var dataurl = canvas.toDataURL('image/jpeg',0.8); //canvas to jpg dataurl
var blob = dataURLtoBlob(dataurl);

var fd = new FormData();
fd.append("image", blob, "filename.png");
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.send(fd);

将数据URI转换为文件

3 个答案: