怎么把圖轉(zhuǎn)成base64？

• 方法一：

  new fileReader().readAsDataURL(file)
  

• 方法二：

  var imgCanvas=document.createElement('canvas');
       mgContext=imgCanvas.getContext('2d');
  var imgAsDataURL=imgCanvas.toDataURL("image/jpeg");
  

缺點
就是任何圖片都被png了
編碼出來的字符串大小可能要比原圖編碼出來的要大

demo 可以在控制臺運行

 var file = document.createElement('input');
 file.type = 'file';
 document.body.appendChild(file);
 file.onchange=function(){
        var reader=new FileReader()
        reader.onload = function ( event ) {console.log(event.target.result);};
        reader.readAsDataURL(file.files[0]);
 }

結(jié)果
data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL....
然后調(diào)用：

1. Base64 在CSS中的使用

    .demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); }
   

2. Base64 在HTML中的使用

    <img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />`
   

好處：

1. data格式的Url最直接的好處是，這些Url原本會引起一個新的網(wǎng)絡訪問，因為那里是一個網(wǎng)頁的地址，
   現(xiàn)在不會有新的網(wǎng)絡訪問了，因為現(xiàn)在這里是網(wǎng)頁的內(nèi)容。這樣做，會減少服務器的負載，
   當然同時也增加了當前網(wǎng)頁的大小。所以對“小”數(shù)據(jù)特別有好處。

2. data類型Url的形式
   既然是Url，當然也可以直接在瀏覽器的地址欄中輸入。
   我們把圖像文件的內(nèi)容直接寫在了HTML 文件中，這樣做的好處是，節(jié)省了一個HTTP 請求。

3. 壞處呢，就是瀏覽器不會緩存這種圖像。

4. 如果你用的是IE8，如果你想編碼圖片，更簡單的方法是，自己寫一個HTML網(wǎng)頁，把本地圖片放進去，然后用IE8打開該網(wǎng)頁，然后保存為mht文件，然后用記事本打開mht文件，你就會看
   到圖片以及被編碼過了，直接拷貝之，粘貼之，加上data:image/jpeg;base64,等前綴，搞定之。
   在mht文件中，每一個NextPart下面都會有類似下面的幾行說明字段：

   Content-Type: image/jpeg Content-Transfer-Encoding: base64 
   Content-Location: file:///E:/cat2.jpg 
   

根據(jù)這些信息就可以知道是用什么方式編碼的什么格式的文件了

5. 目前，Data URI scheme支持的類型有：

   data:,文本數(shù)據(jù) data:text/plain,  文本數(shù)據(jù)               
   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圖片數(shù)據(jù) 
   data:image/png;base64,          base64編碼的png圖片數(shù)據(jù) 
   data:image/jpeg;base64,         base64編碼的jpeg圖片數(shù)據(jù) 
   data:image/x-icon;base64,       base64編碼的icon圖片數(shù)據(jù) 
   

base64簡單地說，它把一些 8-bit 數(shù)據(jù)翻譯成標準 ASCII 字符，