怎么把圖轉(zhuǎn)成base64拍嵌？
方法一：
new fileReader().readAsDataURL(file)
方法二：
var imgCanvas=document.createElement('canvas');
mgContext=imgCanvas.getContext('2d');
var imgAsDataURL=imgCanvas.toDataURL("image/jpeg");
缺點(diǎn)
就是任何圖片都被png了
編碼出來的字符串大小可能要比原圖編碼出來的要大
demo 可以在控制臺運(yùn)行
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)用：
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原本會引起一個新的網(wǎng)絡(luò)訪問羞延，因為那里是一個網(wǎng)頁的地址渡嚣，
現(xiàn)在不會有新的網(wǎng)絡(luò)訪問了梢睛，因為現(xiàn)在這里是網(wǎng)頁的內(nèi)容。這樣做识椰，會減少服務(wù)器的負(fù)載绝葡，
當(dāng)然同時也增加了當(dāng)前網(wǎng)頁的大小。所以對“小”數(shù)據(jù)特別有好處裤唠。
data類型Url的形式
既然是Url挤牛，當(dāng)然也可以直接在瀏覽器的地址欄中輸入。
我們把圖像文件的內(nèi)容直接寫在了HTML 文件中种蘸，這樣做的好處是墓赴，節(jié)省了一個HTTP 請求。
壞處呢航瞭，就是瀏覽器不會緩存這種圖像诫硕。
如果你用的是IE8，如果你想編碼圖片刊侯，更簡單的方法是章办，自己寫一個HTML網(wǎng)頁，把本地圖片放進(jìn)去滨彻，然后用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ù)這些信息就可以知道是用什么方式編碼的什么格式的文件了
目前碱妆，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ù)翻譯成標(biāo)準(zhǔn) ASCII 字符，
