来自DataURL的Blob？
使用FileReader的readAsDataURL()我可以将任意数据转换为数据URL。 有没有办法使用内置浏览器API将数据URL转换回Blob实例？
用户马特一年前提出以下代码（ 如何将dataURL转换为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; }
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}); }
inputdataURI是Data URL，dataTYPE是文件types，然后输出blob对象
就像@Adria方法，但与Fetch API，只是更小[ caniuse？ ]
不必考虑mimetype，因为blob响应types就是开箱即用的
警告：可能违反内容安全政策（CSP）
…如果你使用这些东西
var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" fetch(url) .then(res => res.blob()) .then(blob => console.log(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 ); });
尝试：
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}); }
由于这些答案都不支持base64和non-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 MIMEtypes可能需要不同的处理。 但是请让我知道，如果你发现！ DataURL可以简单地使用任何格式，在这种情况下，您可以根据自己的具体情况find合适的代码。
使用
FileReader.readAsArrayBuffer(Blob|File)
而不是
FileReader.readAsDataURL(Blob|File)
