又到週五了，這幾周遇到一個讓我很頭疼的問題，介面文件裡寫著：

尼瑪！看著就頭疼，這寫的什麼呀，完全看不懂呀！

於是乎，一番百度，似乎有了點頭緒，下面講講：

我不是來講概念的，直接切入正題，圖片的base64編碼就是可以將一副圖片資料編碼成一串字串，使用該字串代替影象地址。

這樣做有什麼意義呢？我們知道，我們所看到的網頁上的每一個圖片，都是需要消耗一個http請求下載而來的（所有才有了csssprites技術的應運而生，但是csssprites有自身的侷限性，下文會提到）。

　　沒錯，不管如何，圖片的下載始終都要向伺服器發出請求，要是圖片的下載不用向伺服器發出請求，而可以隨著 HTML 的下載同時下載到本地那就太好了，而base64正好能解決這個問題。

　　那麼圖片的base64編碼長什麼樣子呢？舉個栗子。www.google.com的首頁搜尋框右側的搜尋小圖示使用的就是base64編碼。我們可以看到：

url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;

 //在html程式碼img標籤裡的寫法
 <img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">
 

明白了，就是將圖片路徑轉化成base64string格式，這尼瑪！！！！！，恍然大悟呀！！！！！

現在明白了介面的意思，那麼如何實現轉換呢？

答案來了：

主要使用到HTML5強大的FileReader物件(大家可以嘗試使用canvas的toDataURL方法應該也是可以的)

先看效果：

1. 選擇圖片：  
2. <input type="file" id="img">  
3. <br/>  
4. <button id="start">開始轉換</button>  
5. <div>  
6.     預覽：<img id="imgShow"
    src="" alt="">  
7. </div>  
8. <b>Base64資料：</b>  
9. <textarea rows=15 cols=60 id="conte"></textarea>  
10. <button id='cpData'>複製</button><span id="succ"></span>  
11. <div id="len">資料長度：</div>  
12. <script>  
13.     var img = document.getElementById('img')  
14.         , imgShow = document.getElementById('imgShow')  
15.         , conte = document.getElementById('conte')  
16.         , len = document.getElementById('len')  
17.         , start = document.getElementById('start')  
18.         , cpData = document.getElementById('cpData');  
19.     cpData.addEventListener('click', cpDataF);  
20.     start.addEventListener('click', startt);  
21.     /*轉換函式*/  
22.     function startt() {  
23.         var imgFile = new FileReader();  
24.         imgFile.readAsDataURL(img.files[0]);  
25.         imgFile.onload = function () {  
26.             var imgData = this.result; //base64資料    
27.             imgShow.setAttribute('src', imgData);  
28.             conte.value = imgData;  
29.             len.innerHTML += imgData.length;  
30.         }  
31.     }  
32.     /*複製資料*/  
33.     function cpDataF() {  
34.         conte.select(); // 選擇物件    
35.         var cpd=document.execCommand("Copy"); // 執行瀏覽器複製命令    
36.         cpd ? document.getElementById('succ').innerHTML = '複製成功' :　console.warn('複製失敗');  
37.         window.setTimeout(function () {  
38.             document.getElementById('succ').innerHTML = '';  
39.         }, 1000)  
40.     }  
41. </script>