文件数据转换

1|0Blob URL (Object URL)

是前缀为 blob:的 URL，用来表示关联的Blob对象，这个 URL 的生命周期和创建它的窗口的 document 绑定。

const blobUrl = URL.createObjectURL(blob);

可在浏览器地址栏、img标签src、iframe标签src、a标签href中使用，并展示相应的文件内容视图。常配合a标签download属性实现文件下载。

2|0Base64

base64 是一种基于64个可打印字符来表示二进制数据的方法。

2|1优点

方便数据的传输和读写。

2|2方法

atob: 解码一个 Base64 字符串。
btoa: 将一个字符串或者二进制数据编码一个 Base64 字符串。

 btoa("JavaScript")       // 'SmF2YVNjcmlwdA=='
 atob('SmF2YVNjcmlwdA==') // 'JavaScript'

3|0Data URL

是前缀为 data:[MIME type];base64,的 URL，将文件内容转换为 base64 字符串存储于 URL 中。

可在浏览器地址栏、img标签src、iframe标签src、a标签href、css 的 background-image-url 中使用，并展示相应的文件内容视图。

3|1缺点

base64编码的体积通常为原数据体积的4/3。
DataURL的图片不会被浏览器缓存，意味每次访问都被下载一次。
DataURL在渲染时比不使用多消耗53%左右的CPU资源，内存多出4倍左右，耗时平均高出24.6倍[^1]。

4|0Image对象相关使用

const img = new Image()
img.src = blobURL | dataURL
img.onload = handleOnload

5|0canvas相关方法

drawImage: 可传入 Image对象并绘制。
putImageData: 传入 ImageData对象并绘制。
getImageData: 图像数据化，返回ImageData对象。
toDataURL: 图像数据化，返回DataURL字符串。
toBlob: 图像数据化，返回Blob对象。

6|0数据转换

6|1ArrayBuffer → Blob

const blob = new Blob([new Uint8Array(buffer, byteOffset, length)]);

6|2ArrayBuffer → base64

const base64 = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));

6|3base64 → Blob

const base64toBlob = (base64Data, contentType, sliceSize) => {
  const byteCharacters = atob(base64Data);
  const byteArrays = [];
  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }
  const blob = new Blob(byteArrays, {type: contentType});
  return blob;
}

6|4Blob → ArrayBuffer

function blobToArrayBuffer(blob) { 
  return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result);
      reader.onerror = () => reject;
      reader.readAsArrayBuffer(blob);
  });
}

6|5Blob → base64

function blobToBase64(blob) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });
}

6|6Blob → Object URL

const objectUrl = URL.createObjectURL(blob);

6|7Blob → File

const file = new File([blob], "filename.png", {type: "image/png",});

6|8File → Blob

const blob = new Blob([file],{type:'image/png'})

__EOF__

本文作者：Odyssey
本文链接：https://www.cnblogs.com/qingzhao/p/17135504.html
关于博主：I am a good person
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！