一、我們在看程式碼時經常在img或css背景圖片中看到：
src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOus
bgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4==”

src或 url() 中有一大串編碼。它把一些 8-bit 資料翻譯成標準 ASCII 字元，網上有很多免費的base64 編碼和解碼的工具， 後面跟的一串程式碼就相當於連結地址。

二、目前，Data URL scheme 支援的型別：

data:,文字資料
data:text/plain,文字資料
data
 
:text/html,HTML程式碼
data:text/html;base64,base64編碼的HTML程式碼
data:text/css,CSS程式碼
data:text/css;base64,base64編碼的CSS程式碼
data:text/JavaScript,Javascript程式碼
data:text/javascript;base64,base64編碼的Javascript程式碼
data:image/gif;base64,base64編碼的gif圖片資料
data:image/png;base64,base64編碼的png圖片資料
data:image/jpeg;base64,base64編碼的jpeg圖片資料
 

data:image/x-icon;base64,base64編碼的icon圖片資料

三、js將圖片轉化為base64（2種方法）

1. 利用canvas 將圖片轉化為base64 編碼格式

var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d'),
   img = new Image;
   img.src="./vheider.jpg";
 //  img.setAttribute('crossOrigin', 'anonymous')  // 圖片跨域時有用
   img.onload = function(){
       canvas
 
.height = img.height;
       canvas.width = img.width;
       ctx.drawImage(img,0,0);
       dataURL =canvas.toDataURL("image/jpeg");

        $('#img').attr('src', dataURL);
        console.log(canvas.toDataURL("image/jpeg"))

  };

注意： 這裡要在服務端開啟，不然瀏覽器可能會報 index.html:41 Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 錯誤

2 . 利用 html5 的 FileReader 將圖片轉化base64格式
FileReader 是H5提供的一個處理檔案的API，
① 判斷瀏覽器是否支援FileReader

if(window.FileReader){
    //處理檔案
}else{
   return "瀏覽器不支援FileRedaer"
}

② FileReader 介面有四個方法：

readAsBinaryString (file) 將檔案讀取為二進位制碼
readAsDataURL (file) 將檔案讀取為 DataURL
readAsText (file,encoding) 將檔案讀取為文字(第二個引數是編碼格式，一般預設是UTF-8)
about 中斷讀取

③ FileReader還提供給了一些事件：

• onabort 中斷時觸發
• onerror 出錯時觸發
• onload 檔案讀取成功完成時觸發
• onloadend 讀取完成觸發，無論成功或失敗
• onloadstart 讀取開始時觸發
• onprogress 讀取中

注意：重點內容
FileReader 讀取後的檔案不會返回給FileReader 本身， 而是儲存在了 result 中

HTML

<input type="file" id="file"  multiple="multiple">
<div id="imgDiv"></div>       

JS

var result = document.getElementById("result");  
var file = document.getElementById("file");
file.change=function(){
    var file = file.files[0]
    var reader=new FileReader();  

    reader.readAsBinaryString(file);  
    reader.onload=function (e){  
        imgDiv.innerHTML='<img src="'+this.result+'" alt=""/>'  
        console.log(this) // 打印出轉換後的 file 檔案物件
    }  
}