簡(jiǎn)介

在JS中，常見的圖片格式有img對(duì)象（url）、file對(duì)象、base64、blob對(duì)象、canvas對(duì)象、因?yàn)殚_發(fā)業(yè)務(wù)的需求，需要經(jīng)常的對(duì)文件類型進(jìn)行轉(zhuǎn)換。
常見的圖片格式轉(zhuǎn)化有：

1. URL --- > Base64

轉(zhuǎn)化思路：url -- > <img> --> Canvas --> canvas.toDataURL --> Base64
示例代碼：

/**
 * URL轉(zhuǎn)base64
 * @param url String 圖片鏈接
 * @callback Function 獲取base64格式后的回調(diào)函數(shù)
 */
function translateImgToBase64(url,callback){
    var canvas = document.createElement('canvas')
    context = canvas.getContext('2d')
    img = new Image  //通過構(gòu)造函數(shù)繪制圖片實(shí)例
    img.crossOrigin = 'Anonymous'  //處理圖片跨域問題，見拓展1
    img.onload = function(){   //該加載過程為異步事件，請(qǐng)先確保獲取完整圖片
        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格式的回調(diào)函數(shù)
 * @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)
})

拓展一：圖片轉(zhuǎn)base64的跨域問題

問題：百度出來的圖片地址，可以利用<img>使用，但是有的無法轉(zhuǎn)base64，出現(xiàn)以下報(bào)錯(cuò)：

原因：由于Canvas無法對(duì)跨域的圖片進(jìn)行操作，在純前端利用JS通過圖片的url(比如百度的圖片)轉(zhuǎn)化為base64，則必須使用canvas，所以必須開啟允許跨域，除了當(dāng)前執(zhí)行canvas前開啟跨域（img.crossOrigin = 'Anonymous'）外，服務(wù)端也必須開啟允許跨域。

2. Base64 ---> Blob

轉(zhuǎn)化思路：base64 --> Uint8Array --> new Blob()
示例代碼：

/**
 * Base64轉(zhuǎn)Blob
 * @param base64 String base64格式字符串
 * @param contentType String blob對(duì)象的文件類型，如："image/png"
 */
 function translateBase64ImgToBlob(base64,contentType){
     var arr = base64.split(',')  //去掉base64格式圖片的頭部
     var bstr = atob(arr[1])   //atob()方法將數(shù)據(jù)解碼
     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 )  //創(chuàng)建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數(shù)據(jù)解（編）碼方法

（1）btoa（）
btoa（） 方法用于創(chuàng)建一個(gè)base64編碼的字符串。該方法使用 "A-Z", "a-z", "0-9", "+", "/" 和 "=" 字符來編碼字符串。
語法：window.btoa(str)
str 必需項(xiàng)，要編碼的字符串
返回值：返回一個(gè)base64編碼的字符串
（2）atob（）
atob() 方法用于解碼使用 base-64 編碼的字符串。
語法：window.atob(encodedStr)
encodedStr 必需項(xiàng)，一個(gè)通過btoa（）方法編碼的字符串
返回值：返回一個(gè)解碼的字符串

拓展三：Uint8Array數(shù)組類型

Uint8Array數(shù)組類型表示一個(gè)8位無符號(hào)整型數(shù)組，創(chuàng)建時(shí)內(nèi)容被初始化為0，創(chuàng)建完成后，可以以對(duì)象的方式或使用數(shù)組下標(biāo)索引的方式引用數(shù)組中的元素。
語法格式：

new Uint8Array()
new Uint8Array(length)  //創(chuàng)建初始化為0的，包含length個(gè)元素的無符號(hào)整型數(shù)組

上述示例中的u8arr打印結(jié)果如下：

<meta charset="utf-8">

3. Base64 ---> file

轉(zhuǎn)化思路：base64 --> Uint8Array --> new File（）

示例代碼：

/**
 * Base64轉(zhuǎn)
 * @param base64 String base64格式字符串
 * @param contentType String file對(duì)象的文件類型，如："image/png"
 * @param filename String 文件名稱或者文件路徑
 */
 function translateBase64ImgToFile(base64,filename,contentType){
     var arr = base64.split(',')  //去掉base64格式圖片的頭部
     var bstr = atob(arr[1])   //atob()方法將數(shù)據(jù)解碼
     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 )
})

打印結(jié)果：

4. Blob（File） ---> Base64

轉(zhuǎn)化思路：利用FileReader的readAsDataURL，將blob轉(zhuǎn)為base64

示例代碼：

/**
 * Blob轉(zhuǎn)Base64
 * @param base64 String base64格式字符串
 * @param callback Function 獲取轉(zhuǎn)換結(jié)果e.target.result后執(zhí)行的回調(diào)函數(shù)
 */
 function translateBlobToBase64(blob,callback){
     var reader = new FileReader()
     reader.onload = function(e){
         callback(e.target.result)
     }
     reader.readAsDataURL(blob)  
     //讀取后，result屬性中將包含一個(gè)data:URL格式的Base64字符串用來表示所讀取的文件
 }

注：file對(duì)象其實(shí)也是Blob對(duì)象的一種，故轉(zhuǎn)換為base64的方式一樣

5. Canvas ---> Base64

轉(zhuǎn)化思路：利用HTMLCanvasElement的API .toDataURL() 返回一個(gè)包含圖片展示的 data URL ，默認(rèn)格式為png

示例代碼

$("#confirm").on("click", function () { 
    var img_canvas = document.getElementsByTagName('canvas') 
    var base64URL = img_canvas.toDataURL("image/png"); 
    $(".canvas").html(``)
}); 

6. Canvas ---> Bolb

轉(zhuǎn)化思路：利用HTMLCanvasElement.toBlob() 方法創(chuàng)造Blob對(duì)象，用以展示canvas上的圖片

示例代碼：

$("#confirm").on("click", function () {
    var img_canvas = gdocument.getElementsByTagName('canvas')
    img_canvas.toBlob(function (blob) {
      var url = URL.createObjectURL(blob);
      $(".canvas").html('');
    })
  });