使用FileReader's readAsDataURL()I 可以将任意数据转换为数据 URL。有没有办法Blob使用内置浏览器 api将数据 URL 转换回实例？
来自 DataURL 的 Blob？
IT技术
javascript
fileapi
2021-01-26 05:48:25
6个回答
用户 Matt 在一年前提出了以下代码（How to convert dataURL to file object in javascript?）这可能对您有所帮助
编辑：正如一些评论者所报告的那样，BlobBuilder 一段时间前已被弃用。这是更新后的代码：
function dataURItoBlob(dataURI) {
// convert base64 to raw binary data held in a string
// doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
var byteString = atob(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
// create a view into the buffer
var ia = new Uint8Array(ab);
// set the bytes of the buffer to the correct values
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
// write the ArrayBuffer to a blob, and you're done
var blob = new Blob([ab], {type: mimeString});
return blob;
}
像@Adria 方法，但使用 Fetch api 并且更小 [ caniuse? ]
不必考虑 mimetype，因为 blob 响应类型是开箱即用的
警告：可能违反内容安全政策 (CSP)
...如果你使用那些东西
var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
fetch(url)
.then(res => res.blob())
.then(blob => console.log(blob))不要认为你可以在不使用 lib 的情况下做得更小
在现代浏览器中，可以使用 Christian d'Heureuse 在评论中建议的 one liner：
const blob = await (await fetch(dataURI)).blob();
dataURItoBlob : function(dataURI, dataTYPE) {
var binary = atob(dataURI.split(',')[1]), array = [];
for(var i = 0; i < binary.length; i++) array.push(binary.charCodeAt(i));
return new Blob([new Uint8Array(array)], {type: dataTYPE});
}
输入 dataURI 是数据 URL 和 dataTYPE 是文件类型，然后输出 blob 对象
基于 XHR 的方法。
function dataURLtoBlob( dataUrl, callback )
{
var req = new XMLHttpRequest;
req.open( 'GET', dataUrl );
req.responseType = 'arraybuffer'; // Can't use blob directly because of https://crbug.com/412752
req.onload = function fileLoaded(e)
{
// If you require the blob to have correct mime type
var mime = this.getResponseHeader('content-type');
callback( new Blob([this.response], {type:mime}) );
};
req.send();
}
dataURLtoBlob( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==', function( blob )
{
console.log( blob );
});