DataURL 中的 Blob? ？

小开

使用

FileReader.readAsArrayBuffer(Blob|File)

而不是

FileReader.readAsDataURL(Blob|File)

小开

最佳答案

用户 Matt 在一年前提出了以下代码(如何在 javascript 中将 dataURL 转换为文件对象？) ，这可能会对您有所帮助

编辑: 正如一些评论者报道的那样，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;


}

小开

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

Input dataURI 是 Data URL，dataTYPE 是文件类型，然后输出 blob 对象

小开

尝试:

function dataURItoBlob(dataURI) {
if(typeof dataURI !== 'string'){
throw new Error('Invalid argument: dataURI must be a string');
}
dataURI = dataURI.split(',');
var type = dataURI[0].split(':')[1].split(';')[0],
byteString = atob(dataURI[1]),
byteStringLength = byteString.length,
arrayBuffer = new ArrayBuffer(byteStringLength),
intArray = new Uint8Array(arrayBuffer);
for (var i = 0; i < byteStringLength; i++) {
intArray[i] = byteString.charCodeAt(i);
}
return new Blob([intArray], {
type: type
});
}

小开

使用我的代码将 dataURI 转换为 blob。它比其他的更简单，更干净。

function dataURItoBlob(dataURI) {
var arr = dataURI.split(','), mime = arr[0].match(/:(.*?);/)[1];
return new Blob([atob(arr[1])], {type:mime});
}

小开

基于 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 );
});

小开

像@Adria 方法，但是使用 Fetchapi 和更小的[ 犬科动物？]
不需要考虑 imetype，因为 blob 响应类型可以随意使用

警告: 可能违反内容安全策略(CSP)
如果你用那东西的话

var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="


fetch(url)
.then(res => res.blob())
.then(blob => console.log(blob))

别以为不用 lib 的就能做得更小

小开

由于这些答案都不支持 base64和非 base64的 dataURL，这里有一个基于 vuamitom 删除的答案:

// from https://stackoverflow.com/questions/37135417/download-canvas-as-png-in-fabric-js-giving-network-error/
var dataURLtoBlob = exports.dataURLtoBlob = function(dataurl) {
var parts = dataurl.split(','), mime = parts[0].match(/:(.*?);/)[1]
if(parts[0].indexOf('base64') !== -1) {
var bstr = atob(parts[1]), n = bstr.length, u8arr = new Uint8Array(n)
while(n--){
u8arr[n] = bstr.charCodeAt(n)
}


return new Blob([u8arr], {type:mime})
} else {
var raw = decodeURIComponent(parts[1])
return new Blob([raw], {type: mime})
}
}

注意: 我不确定是否有其他 dataURL mime 类型需要以不同的方式处理。但如果你发现了，请告诉我！DataURL 可以简单地拥有它们想要的任何格式，在这种情况下，应该由您来为您的特定用例找到正确的代码。

小开

使用 XHR API创建一个 blob:

function dataURLtoBlob( dataUrl, callback )
{
var req = new XMLHttpRequest;


req.open( 'GET', dataUrl );
req.responseType = 'blob';


req.onload = function fileLoaded(e)
{
callback(this.response);
};


req.send();
}


var dataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='


dataURLtoBlob(dataURI , function( blob )
{
console.log( blob );
});

小开

在现代浏览器中，人们可以使用 Christian d’Heureuse 在评论中建议的一行:

const blob = await (await fetch(dataURI)).blob();

小开

如果你需要一些可以在 Google Apps Script 服务器端工作的东西，试试:

function dataURItoBlob(dataURI) {
// convert base64 to Byte[]
// doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
var data = Utilities.base64Decode(dataURI.split(',')[1]);


// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]


var blob = Utilities.newBlob(data);
blob.setContentType(mimeString);
return blob;
}