JS中图片文件格式的转换(url、file、base64、blob、canvas)

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

1. URL --- > Base64

转化思路： url -- > <img> --> Canvas --> canvas.toDataURL --> Base64
示例代码：

使用示例：

var url = "http://pic44.nipic.com/20140723/18505720_094503373000_2.jpg"
$(".upload").on('click', function () {
    getImgToBase64(url, getBase64)
拓展一：图片转base64的跨域问题
问题：百度出来的图片地址，可以利用<img>使用，但是有的无法转base64，出现以下报错：

原因：由于Canvas无法对跨域的图片进行操作，在纯前端利用JS通过图片的url(比如百度的图片)转化为base64，则必须使用canvas，所以必须开启允许跨域，除了当前执行canvas前开启跨域（img.crossOrigin = 'Anonymous'）外，服务端也必须开启允许跨域。
2. 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"
$(".upload").on('click', function () {
   var URLData = translateBase64ImgToBlob(base64,"image/jpeg")
   $("#img123").attr("src",URLData.url)
拓展二：Base64数据解（编）码方法
（1）btoa（）

btoa（） 方法用于创建一个base64编码的字符串。该方法使用 "A-Z", "a-z", "0-9", "+", "/" 和 "=" 字符来编码字符串。

语法：window.btoa(str)

str 必需项，要编码的字符串

返回值：返回一个base64编码的字符串

（2）atob（）

atob() 方法用于解码使用 base-64 编码的字符串。

语法：window.atob(encodedStr)

encodedStr 必需项，一个通过btoa（）方法编码的字符串

返回值：返回一个解码的字符串
拓展三：Uint8Array数组类型
Uint8Array数组类型表示一个8位无符号整型数组，创建时内容被初始化为0，创建完成后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。

语法格式：
new Uint8Array()
new Uint8Array(length)  //创建初始化为0的，包含length个元素的无符号整型数组
上述示例中的u8arr打印结果如下：
 * 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"
$(".upload").on('click', function () {
   var result = translateBase64ImgToFile(base64,"testImg.png","image/png")
   console.log(result )
打印结果：
 * 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字符串用来表示所读取的文件
注：file对象其实也是Blob对象的一种，故转换为base64的方式一样
5. 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(``)
6. Canvas ---> Bolb
转化思路：利用HTMLCanvasElement.toBlob() 方法创造Blob对象，用以展示canvas上的图片
示例代码：
$("#confirm").on("click", function () {
    var img_canvas = gdocument.getElementsByTagName('canvas')
    img_canvas.toBlob(function (blob) {
      var url = URL.createObjectURL(blob);
      $(".canvas").html('');