17

我想将data:image使用 base64 编码的图像转换为普通图像文件。到目前为止，我的代码如下所示：

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 图像？

4

3 回答 3

8

您可以将画布转换为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");

这是未经测试的，但应该可以工作。

于 2013-06-26T19:18:49.417 回答
4

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);
于 2015-05-23T01:57:07.343 回答
2

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

鉴于此，我认为最简单的解决方案是发布您的 base64 并让服务器对其进行解码、存储并提供服务。

于 2013-06-26T19:13:36.527 回答