关于图片转换的一些事

前言

前几天作项目遇到了一个问题，如何把base64的格式的图片编码转换为图片的File对象。而后网上也找到了一下具体的实现方法，当中涉及到了一些编码转换的知识，所以特意来总结一下。 先上一段代码

let byteString;
 if (base64Data.split(",")[0].indexOf("base64") >= 0) byteString = atob(base64Data.split(",")[1]);
 else byteString = unescape(base64Data.split(",")[1]);
 let mime = base64Data
    .split(",")[0]
    .split(":")[1]
    .split(";")[0];
  let ia = new Uint8Array(byteString.length);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ia], { type: mime });
复制代码

base64

百度百科的解释是：网络上最多见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。简单点说就是将二进制编码转成ASCII编码，并且base64通常用于http协议下的二进制传输。 优势：能将二进制数据转化为可打印的字符，方便传输，并且也方便加密。 缺点：转化后内容体积过大，编码和解码须要工做量。

atob

window对象的内置方法，用于解码使用 base64 编码的字符串。与之相反的就是btoa，用于base64编码

let string = window.btoa('hello');
console.log(string);
let result = window.atob(string);
console.log(result);
复制代码

打印结果

Uint8Array

MDN的解释是：表示一个8位无符号整型数组，建立时内容被初始化为0。建立完后，能够以对象的方式或使用数组下标索引的方式引用数组中的元素。它这里面其实能存储任何格式的数据，包括对象，数组，字符串，数字，布尔值等等。其实就是存储数据的一种方法。

unescape

unescape() 函数可对经过 escape() 编码的字符串进行解码。
该函数的工做原理是这样的：经过找到形式为 %xx 和 %uxxxx 的字符序列（x 表示十六进制的数字），用 Unicode 字符 \u00xx 和 \uxxxx 替换这样的字符序列进行解码。
可是，ECMAScript v3 已从标准中删除了 unescape() 函数，其实应该用 decodeURI() 和 decodeURIComponent()代替。

Blob

Blob 对象表示一个不可变、原始数据的类文件对象。Blob表示的不必定是JavaScript原生格式的数据。File 接口基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件。 所以将这是咱们转化File文件依赖的关键的对象方法。
正常新建一个blob对象须要两个参数

• 数据序列，能够是任意格式的值
• 指定将要放入Blob中的数据的类型(MIME)

解释

综合以上的编码知识，再来看看最上面的代码，其实就很好理解了。
base64 一般开头会有data:image/png;base64这样格式的字符串

function(base64Data) {
    let byteString;  //声明一个字符串存储对象
    //判断传入的参数是不是base64格式的字符串
     if (base64Data.split(",")[0].indexOf("base64") >= 0) 
     {   //使用 atob解码base64字符串
        byteString = atob(base64Data.split(",")[1]);
     } else {
        //如若不是，就shi用unescape解码
        byteString = unescape(base64Data.split(",")[1]);
     }
     let mime = base64Data //截取出转换的文件格式，也就是"image/png"
        .split(",")[0]
        .split(":")[1]
        .split(";")[0];
      let ia = new U int8 Array(byteString.length); //建立一个Uint8Array对象，长度为byteString的长度
      
      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i); //读取指定位置的字符的 Unicode 编码
      }
      return new Blob([ia], { type: mime });//最后生成并返回 blob对象
}
复制代码

以上base64的转换就完成了。
最后一步，生成File对象

let file = new File([blob], "portrait.jpg", {
  type: "image/jpeg"        
 });
复制代码

File对象接收三个参数

• blob对象
• 生成文件的名称
• 额外参数 type表示具体的格式

这就是base64转换File对象的全过程，其中须要掌握的知识还挺多的。

参考文献链接:
Uint8Array
unescape
blob
base64