怎麼把圖轉成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]); } 結果 data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL.... 然後調用：
Base64 在CSS中的使用 .demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); } Base64 在HTML中的使用 <img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." /> 好處：
data格式的Url最直接的好處是，這些Url原本會引起一個新的網絡訪問，因爲那裏是一個網頁的地址， 現在不會有新的網絡訪問了，因爲現在這裏是網頁的內容。這樣做，會減少服務器的負載， 當然同時也增加了當前網頁的大小。所以對“小”數據特別有好處。
data類型Url的形式 既然是Url，當然也可以直接在瀏覽器的地址欄中輸入。 我們把圖像文件的內容直接寫在了HTML 文件中，這樣做的好處是，節省了一個HTTP 請求。
壞處呢，就是瀏覽器不會緩存這種圖像。
如果你用的是IE8，如果你想編碼圖片，更簡單的方法是，自己寫一個HTML網頁，把本地圖片放進去，然後用IE8打開該網頁，然後保存爲mht文件，然後用記事本打開mht文件，你就會看 到圖片以及被編碼過了，直接拷貝之，粘貼之，加上data:image/jpeg;base64,等前綴，搞定之。 在mht文件中，每一個NextPart下面都會有類似下面的幾行說明字段： Content-Type: image/jpeg Content-Transfer-Encoding: base64 Content-Location: file:///E:/cat2.jpg 根據這些信息就可以知道是用什麼方式編碼的什麼格式的文件了
目前，Data URI 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圖片數據 base64簡單地說，它把一些 8-bit 數據翻譯成標準 ASCII 字符，