来自DataURL的Blob？

8 回答

• 21

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

  回复于 2024-05-17T12:58:10+08:00
• 2

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

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

  回复于 2024-05-17T12:58:10+08:00
• 10

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

  回复于 2024-05-17T12:58:10+08:00
• 0

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

  回复于 2024-05-17T12:58:10+08:00
• 15

  尝试：

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

  回复于 2024-05-17T12:58:10+08:00
• 91

  使用

  FileReader.readAsArrayBuffer(Blob|File)
  

  而不是

  FileReader.readAsDataURL(Blob|File)
  

  回复于 2024-05-17T12:58:10+08:00
• -1

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

  回复于 2024-05-17T12:58:10+08:00
• 0

  像@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，不要认为你可以做得更小

  回复于 2024-05-17T12:58:10+08:00