html5將圖片轉換成base64的實例代碼

時間 2019-12-13

標籤 html5 html 圖片轉換 base64 base 實例代碼欄目 HTML5 简体版

原文原文鏈接

這篇文章給你們介紹瞭如何利用html5將圖片轉換成base64，文中經過示例代碼介紹的很詳細，有須要的朋友們能夠參考借鑑。javascript

base64編碼介紹
base64是一種網絡上經常使用的8bit字節代碼的編碼方式，base64能夠用於http環境下傳遞較長的標識信息，同時能夠放在url當中使用，由於base64不懼可讀性，因此具備必定的加密功能。html

爲何要把圖片轉換成base64編碼？
將圖片轉換成base64代碼能夠減小http請求，由於圖片能夠以字符編碼的形式直接傳遞到客戶端，而文件形式都須要進行http請求。可是也會有一個小缺點，就是圖片編碼化base64的時候大小會變大，可是經過gzip優化之後基本差很少。因此在應用的過程中較小的圖片能夠直接編碼成base64，較大的圖片則不建議如此使用。html5

html5如何將圖片轉換成base64？
html5若是要將圖片轉換成base64須要使用到一個html5的接口FileReader.readAsDataURL()接口說明,這個接口能夠將文件轉換成base64編碼格式，而且再以data：URL的形式展示出來。java

示例程序
下面的代碼是示例程序，建立一個新html文件，而後將代碼複製粘貼使用支持html5的瀏覽器打開便可查看效果。瀏覽器

 1 <!Doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" />
 5 <title>html5 image to base64</title>
 6 </head>
 7 <body>
 8 <script type="text/javascript">
 9 window.onload = function(){ 
10 // 抓取上傳圖片，轉換代碼結果，顯示圖片的dom
11 var img_upload=document.getElementById("img_upload");
12 var base64_code=document.getElementById("base64_code");
13 var img_area=document.getElementById("img_area");
14 // 添加功能出發監聽事件
15 img_upload.addEventListener('change',readFile,false);}
16 function readFile(){
17 var file=this.files[0];
18 if(!/image\/\w+/.test(file.type)){ 
19 alert("請確保文件爲圖像類型"); 
20 return false; 
21 }
22 var reader=new FileReader();
23 reader.readAsDataURL(file);
24 reader.onload=function(){
25 base64_code.innerHTML = this.result; 
26 img_area.innerHTML = '<div>圖片img標籤展現：</div><img src="'+this.result+'" alt=""/>'; 
27 }
28 }
29 </script>
30 <input type="file" id="img_upload"/>
31 <textarea id="base64_code" rows="30" cols="360"></textarea>
32 <p id="img_area"></p>
33 </body>
34 </html>

html5圖片轉換base64代碼服務器

程序的設計思路
1.建立三個html標籤，input用來上傳圖片，textarea用來顯示base64代碼，由於base64代碼內容不少因此使用textarea標籤，p標籤用來顯示圖片。
2.使用js調用html5的FileReader.readAsDataURL()的API，聲明三個變量用於控制圖片上傳，base64代碼顯示以及圖片的顯示。
3.img_upload.addEventListener('change',readFile,false);添加一個監聽事件，若是上傳文件發生變化就執行readFile函數。
4.readFile函數的內容就是調用接口，將圖片轉換成base64再輸出。
5.在執行轉換和輸出以前先判斷一下上傳文件是否是圖片。網絡

代碼解析及注意
1.var file=this.files[0];這裏是抓取到上傳的對象。
2.this.result這個result是FileReader.readAsDataURL()接口當中轉換完圖片輸出的base64結果存放在result當中。在代碼當中添加console.log(reader);查看一下FileReader對象就能夠看到。(reader是我本身起的對象的名稱)dom

我使用html5將圖片轉換成base64代碼的目的主要是想將圖片寫入到瀏覽器本地的數據當中來使用，上傳的時候，再嘗試恢復出來上傳圖片。目的是爲了減小本地瀏覽器應用和服務器的數據通訊。函數

總結
以上就是這篇文章的所有內容，但願能對你們的學習或者工做帶來必定的幫助，若是有疑問你們能夠留言交流。學習

原文見：‘http://www.jb51.net/html5/495901.html’，感謝原做者分享！