添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
首发于 前端拾遗

Base64/Blob/File 图片文件转换

Base64 是一组相似的二进制到文本(binary-to-text)的编码规则,使得二进制数据在解释成 radix-64 的表现形式后能够用 ASCII 字符串的格式表示出来。Base64 这个词出自一种 MIME 数据传输编码。
Blob对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
File 对象是特殊类型的 Blob,且可以用在任意的 Blob 类型的 context 中。比如说, FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。

function TranFile (from, to, data, filename) {
  return new Promise((resolve) => {
    if (from == 'BASE64') {
      let arr = data.split(',');
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      if (to == 'BLOB') {
        resolve({ data: new Blob([u8arr], { type: mime }) });
      } else if (to == 'FILE') {
        console.log('this is never use, func this name');
        resolve({ data: new File([u8arr], '', { type: mime }) });
    } else if (from == 'FILE') {
      if (to == 'BASE64') {
        let reader = new FileReader();
        reader.readAsDataURL(data);
        reader.onload = function (e) {
          resolve({ data: e.target.result });
      } else if (to == 'BLOB') {
        resolve({ data: new Blob([data], { type: data.type }) });
    } else if (from == 'BLOB') {
      if (to == 'BASE64') {
        let reader = new FileReader();
        reader.readAsDataURL(data);
        reader.onload = function (e) {
          resolve({ data: e.target.result });
      } else if (to == 'FILE') {
        if (!filename) {
          let suffix = data.type.split('/')[1];
          filename = 'newfile.' + suffix;