图片文件流的转换(url、file、base64、blob、canvas、uint8array)

写在前面

在 JS 中，常见的图片格式有 img 对象 urlfile、file 对象、base64、blob 对象、canvas 对象、uint8array
因为开发业务的需求，需要经常的对文件类型进行转换。

Base64 转 Blob

转化思路：Base64 –> Uint8Array –> new Blob()

/**
 * Base64转Blob
 * @param base64 String base64格式字符串
 * @param contentType String blob对象的文件类型，如："image/png"
 */
function translateBase64ImgToBlob(base64, contentType) {
  var arr = base64.split(","); //去掉base64格式图片的头部
  var bstr = atob(arr[1]); //atob()方法将数据解码
  var leng = bstr.length;
  var u8arr = new Uint8Array(leng);
  while (leng--) {
    u8arr[leng] = bstr.charCodeAt(leng); //返回指定位置的字符的 Unicode 编码
  }
  var blob = new Blob([u8arr], { type: contentType });
  var blobImg = {};
  blobImg.url = URL.createObjectURL(blob); //创建URL,
  blobImg.name = new Date().getTime() + ".png";
  return blobImg;
}

var base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA......q"; //注意base64格式

Base64 转 File

转化思路：base64 –> Uint8Array –> new File()

/**
 * Base64转
 * @param base64 String base64格式字符串
 * @param contentType String file对象的文件类型，如："image/png"
 * @param filename String 文件名称或者文件路径
 */
function translateBase64ImgToFile(base64, filename, contentType) {
  var arr = base64.split(","); //去掉base64格式图片的头部
  var bstr = atob(arr[1]); //atob()方法将数据解码
  var leng = bstr.length;
  var u8arr = new Uint8Array(leng);
  while (leng--) {
    u8arr[leng] = bstr.charCodeAt(leng); //返回指定位置的字符的 Unicode 编码
  }
  return new File([u8arr], filename, { type: contentType });
}

var base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA......q"; //注意base64格式

Blob(File) 转 Base64

转化思路：利用 FileReader 的 readAsDataURL，将 blob 转为 base64

/**
 * Blob转Base64
 * @param base64 String base64格式字符串
 * @param callback Function 获取转换结果e.target.result后执行的回调函数
 */
function translateBlobToBase64(blob, callback) {
  var reader = new FileReader();
  reader.onload = function (e) {
    callback(e.target.result);
  };
  reader.readAsDataURL(blob);
  //读取后，result属性中将包含一个data:URL格式的Base64字符串用来表示所读取的文件
}

canvas 转 Base64

转化思路：利用 HTMLCanvasElement 的 API .toDataURL() 返回一个包含图片展示的 data URL ，默认格式为 png

$("#confirm").on("click", function () {
  var img_canvas = document.getElementsByTagName("canvas");
  var base64URL = img_canvas.toDataURL("image/png");
  $(".canvas").html(``);
});
// 利用URL.createObjectURL可以转为blob

Uint8Array 转 Base64

转化思路：利用 ascii 编码重新 self.btoa

/**
 * uint8array转Base64
 * @param callback Function 获取转换结果e.target.result后执行的回调函数
 */
function translateU8ToBase64(u8, callback) {
  var ascii = new Uint8Array(u8);
  var base64encoded = btoa(String.fromCharCode.apply(null, ascii));
}

写在后面

什么是 Base64

base64 是一种用 64 个可打印字符编码任意二进制的方法。所谓 Base64，就是说选出 64 个字符，小写字母 a-z、大写字母 A-Z、数字 0-9、符号”+”、”/“（再加上作为垫字的”=”，实际上是 65 个字符）作为一个基本字符集。然后，其他所有符号都转换成这个字符集中的字符。
具体来说，转换方式可以分为四步。第 1 步，将每三个字节作为一组，一共是 24 个二进制位。第 2 步，将这 24 个二进制位分为四组，每个组有 6 个二进制位。第 3 步，在每组前面加两个 00，扩展成 32 个二进制位，即四个字节。
根据下表，得到扩展后的每个字节的对应符号，这就是 Base64 的编码值。

什么是 Uint8Array

Uint8Array 数组类型表示一个 8 位无符号整型数组，创建时内容被初始化为 0。创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array

什么是 File 对象

HTML5 在 DOM 中为文件输入元素添加了一个 files 集合。在通过文件输入字段选择了一或多个文件时，files 集合中将包含一组 File 对象，每个 File 对象对应着一个文件。每个 File 对象都有下列只读属性，分别是
name: 本地文件系统中的文件名
size: 文件的字节大小
type: 字符串
MIME: 文件类型
lastModifiedDate: 文件上一次被修改的时间
https://developer.mozilla.org/zh-CN/docs/Web/API/File