javascript 将数据 URI 转换为文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17328438/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert Data URI to File
提问by Em Sta
I want to convert a data:imageencoded with base64 to a normal image file. So far my code looks like this:
我想将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;
};
As you can see it creates an DataUrl that is afterwards displayed in an output(#cancascontent). The final output looks something like this:
正如您所看到的，它创建了一个 DataUrl，然后显示在输出中（#cancascontent）。最终输出如下所示：
data:image/png;base64,iVBORw0KGgo.................
My problem is that I need it necessarily decoded so that I can upload the images. My aim is that my javascript code displays the image in a new window like a "normal" image file. For example. like this:
我的问题是我需要解码它以便我可以上传图像。我的目标是我的 javascript 代码像“普通”图像文件一样在新窗口中显示图像。例如。像这样：
http://example.com/images/pro_js_3e.png
How can I decode the base64 image?
如何解码base64图像？
采纳答案by Rocket Hazmat
You can convert the canvas to a Blob, and then upload that.
您可以将画布转换为Blob，然后上传。
To convert to a Blob, try this script: https://github.com/blueimp/JavaScript-Canvas-to-Blob
要转换为 Blob，请尝试使用此脚本：https: //github.com/blueimp/JavaScript-Canvas-to-Blob
Then you can use canvas.toBlobinstead of canvas.toDataURL.
然后你可以使用canvas.toBlob代替canvas.toDataURL。
Then to upload it, you need to use FormData
然后上传它，你需要使用 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");
This is un-tested, but should work.
这是未经测试的，但应该可以工作。
回答by cuixiping
The code of https://github.com/blueimp/JavaScript-Canvas-to-Blobis a bit long.
https://github.com/blueimp/JavaScript-Canvas-to-Blob的代码有点长。
My dataURLtoBlob() function code is much shorter.
我的 dataURLtoBlob() 函数代码要短得多。
Convert dataURL to blob, then use FormData and ajax to send.
将 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);
回答by Pwnna
So I don't think you can convert from base64 to a binary before you upload (there probably is a way, but it might be pretty convoluted). Your last requirement of serving it as a regular image link means that you have to store it on the server somewhere. This means that no matter what you do you're going to have to upload.
所以我不认为你可以在上传之前从 base64 转换为二进制文件（可能有一种方法，但它可能非常复杂）。您将其作为常规图像链接提供的最后一个要求意味着您必须将其存储在服务器上的某个地方。这意味着无论您做什么，都必须上传。
Given that, my opinion of the easiest solution would be to POST your base64 and have the server decode it, store it, and serve it.
鉴于此，我认为最简单的解决方案是发布您的 base64 并让服务器对其进行解码、存储和提供服务。
