Blob from DataURL？

javascript fileapi

2022-08-30 04:52:49

使用 's，我可以将任意数据转换为数据 URL。有没有办法使用内置浏览器API将数据URL转换回实例？FileReaderreadAsDataURL()Blob

答案 1

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

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

}

答案 2

就像@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的情况下做得更小