Javascript 来自DataURL的Blob？

使用

FileReader

的

readAsDataURL（）

我可以将任意数据转换为数据URL。有没有办法使用内置浏览器API将数据URL转换回

Blob

实例？

使用

FileReader.readAsArrayBuffer(Blob|File)

而不是

FileReader.readAsDataURL(Blob|File)

---

用户Matt在一年前提出了以下代码（），这可能会对您有所帮助

编辑：正如一些评论者所报道的，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（dataURI）{ //将base64转换为字符串中的原始二进制数据 //不处理URLEncoded数据URI-请参阅SO答案#6850276以了解执行此操作的代码 var byteString=atob（dataURI.split（'，'）[1]）； //分离出mime组件 var mimeString=dataURI.split（'，'）[0]。split（'：'）[1]。split（'；'）[0] //将字符串的字节写入ArrayBuffer var ab=新阵列缓冲区（byteString.length）； //在缓冲区中创建一个视图 var ia=新的UINT8阵列（ab）； //将缓冲区的字节设置为正确的值 for（var i=0；i

dataURItoBlob:function（dataURI，dataTYPE）{
var binary=atob（dataURI.split（'，）[1]），数组=[]；
对于（var i=0；i

输入数据URI是数据URL，数据类型是文件类型，然后输出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
    });
}

函数dataURItoBlob（dataURI）{ if（数据URI的类型！=='string'）{ 抛出新错误（'无效参数：dataURI必须是字符串'）； } dataURI=dataURI.split（'，'）； var type=dataURI[0]。拆分（“：”）[1]。拆分（“；”）[0]， byteString=atob（dataURI[1]）， byteStringLength=byteString.length， arrayBuffer=新的arrayBuffer（byteStringLength）， InArray=新的UINT8阵列（arrayBuffer）； for（var i=0；i使用我的代码将数据URI转换为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方法，但具有Fetch api和更小的[]
不必考虑mimetype，因为blob响应类型只是开箱即用

警告：可能违反内容安全策略（CSP）
…如果你用那种东西

var url=“data:image/png；base64，ivborw0kggoaaaansuhueugaaaaaaaafcayaacnblaaaaheleqvqi12p4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=”
获取（url）
.then（res=>res.blob（））
.then（blob=>console.log（blob））

由于这些答案都不支持base64和非base64数据URL，下面是一个基于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可能只是具有他们想要的任何格式，在这种情况下，您需要为您的特定用例找到正确的代码。

使用以下方法创建blob： 函数dataURLtoBlob（dataUrl，回调） { var req=新的XMLHttpRequest； 请求打开（'GET'，dataUrl）； req.responseType='blob'； req.onload=函数文件加载（e） { 回调（this.response）； }; 请求发送（）； } var dataURI='数据：图像/png；base64，IVBorW0KggoaaaAnsuhueugaaaaAfaaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaAaEeQi12P4//8/W38 GIAXDIBKE0DHXGLJNBAO9TXL0Y4OHWAAABJRU5ERKJGG=' dataURLtoBlob（dataURI，函数（blob） { 控制台日志（blob）； });在注释中可以使用Christian d'Heureuse建议的一行：

const blob=await（await-fetch（dataURI））.blob（）；

我必须在localStorage中将其无限期地存储为DataURL，因此使用可选的

ArrayBuffer

路径将不起作用。您能解释一下为什么您的代码不需要转换为int-array，而其他人都在这样做吗？请参阅MDN@Rikard什么意思？它不影响任何图像这只适用于一些基本的东西。您需要先对其进行escape+decodeURIComponent，以支持大多数内容编码。这就是为什么其他人将字符串转换为int数组以避免缓慢/饥饿的decodeURIComponent/atob函数调用，并直接转换为bytesSeems，这是现在最好的方法。非常感谢。在Safari中不起作用-如果页面是从HTTPS加载的，它将抛出跨源错误。问题是DataURL中的Blob？非常优雅。不幸的是，edge 13和safari不支持“fetch”。edge 14和safari 10.1Async版本支持此功能：

const blob=wait（wait fetch（url））.blob（）

工作得很好，但从服务器读取文件时没有扩展名。有什么想法吗？这个

fetch

更大的问题是它强制使用异步API。

dataTYPE

嵌入在

dataURI

中，因此应该像第一个答案那样进行解析。dataURL2Blob来自我的图像处理插件，您可以查看此链接。我只是复制我自己的代码。重复拆分似乎有点浪费，因为这可能是一个非常大的字符串。变量“ia”的作用是什么？它被赋予了一个值，但从未用于形成blob。为什么？布莱泽，沃德：ia是缓冲区的视图。因此，当您在ia中设置每个字节时，它正在写入缓冲区。没有ia上的循环，缓冲区将完全为空。我如何找到答案？6850276？@BT:我猜是有意的（注意重定向的URL包括“#6850276”）。Chrome抛出net:：ERR_无效的URL

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