简介

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

1. URL --- > Base64

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

/**
 * URL转base64
 * @param url String 图片链接
 * @callback Function 获取base64格式后的回调函数
 */
function translateImgToBase64(url,callback){
    var canvas = document.createElement('canvas')
    context = canvas.getContext('2d')
    img = new Image  //通过构造函数绘制图片实例
    img.crossOrigin = 'Anonymous'  //处理图片跨域问题，见拓展1
    img.onload = function(){   //该加载过程为异步事件，请先确保获取完整图片
        canvas.width = img.width
        canvas.height = img.height
        context.drawImage(img,0,0)  //将图片绘制在canvas中
        var URLData = canvas.toDataURL('image/png')
        callback(URLData);
        canvas = null
    }
    img.src = url
}

/**
 * 获取base64格式的回调函数
 * @param URLData 获取的base64格式
 */
 function get Base64(URLData){
     console.log("base64",URLData)
 }

使用示例：

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打印结果如下：

<meta charset="utf-8">

3. 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"
$(".upload").on('click', function () {
   var result = translateBase64ImgToFile(base64,"testImg.png","image/png")
   console.log(result )
})

打印结果：

4. 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字符串用来表示所读取的文件
 }

注：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('');
    })
  });