来自DataURL的Blob?

时间:2012-08-28 23:21:33

标签: javascript fileapi

使用FileReader的{​​{1}}我可以将任意数据转换为数据网址。有没有办法使用内置的浏览器apis将数据URL转换回readAsDataURL()实例?

10 个答案:

答案 0 :(得分:107)

用户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;

}

答案 1 :(得分:25)

与@Adria方法类似但是使用Fetch api并且只是更小[caniuse?] 不要考虑mimetype,因为blob响应类型只是开箱即用

  

警告:可能违反内容安全政策(CSP)
  ......如果你使用那些东西

&#13;
&#13;
var_dump()
&#13;
&#13;
&#13;

不要认为你可以在没有使用lib的情况下做到这一点

答案 2 :(得分:16)

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对象

答案 3 :(得分:11)

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

答案 4 :(得分:8)

modern browsers中,可以使用Christian d'Heureuse在评论中建议的一种衬纸:

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

答案 5 :(得分:2)

尝试:

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

答案 6 :(得分:0)

使用我的代码将dataURI转换为blob。 它比其他人更简单,更清洁。

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

答案 7 :(得分:0)

由于这些答案都不支持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可能只是拥有他们想要的任何格式,在这种情况下,您可以根据自己的具体用例找到合适的代码。

答案 8 :(得分:0)

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

答案 9 :(得分:-1)

使用

FileReader.readAsArrayBuffer(Blob|File)

而不是

FileReader.readAsDataURL(Blob|File)