一、我們在看代碼時(shí)經(jīng)常在img或css背景圖片中看到：
src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4==”
src或 url() 中有一大串編碼燥撞。它把一些 8-bit 數(shù)據(jù)翻譯成標(biāo)準(zhǔn) ASCII 字符座柱，網(wǎng)上有很多免費(fèi)的base64 編碼和解碼的工具， 后面跟的一串代碼就相當(dāng)于鏈接地址物舒。
二色洞、目前，Data URL 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ù)
三冠胯、js將圖片轉(zhuǎn)化為base64（2種方法）
- 利用canvas 將圖片轉(zhuǎn)化為base64 編碼格式
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d'),
img = new Image;
img.src="./vheider.jpg";
//img.setAttribute('crossOrigin', 'anonymous') // 圖片跨域時(shí)有用
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0);
dataURL =canvas.toDataURL("image/jpeg");
$('#img').attr('src', dataURL);
console.log(canvas.toDataURL("image/jpeg"))
};
注意：
這里要在服務(wù)端打開火诸，不然瀏覽器可能會報(bào)index.html:41 Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.錯誤
2 . 利用 html5 的 FileReader 將圖片轉(zhuǎn)化base64格式
FileReader 是H5提供的一個(gè)處理文件的API，
① 判斷瀏覽器是否支持FileReader
if(window.FileReader){
//處理文件
}else{
return "瀏覽器不支持FileRedaer"
}
② FileReader 接口有四個(gè)方法：
- readAsBinaryString (file) 將文件讀取為二進(jìn)制碼
- readAsDataURL (file) 將文件讀取為 DataURL
- readAsText (file,encoding) 將文件讀取為文本(第二個(gè)參數(shù)是編碼格式荠察，一般默認(rèn)是UTF-8)
- about 中斷讀取
③ FileReader還提供給了一些事件：
- onabort 中斷時(shí)觸發(fā)
- onerror 出錯時(shí)觸發(fā)
- onload 文件讀取成功完成時(shí)觸發(fā)
- onloadend 讀取完成觸發(fā)置蜀，無論成功或失敗
- onloadstart 讀取開始時(shí)觸發(fā)
- onprogress 讀取中
注意：重點(diǎn)內(nèi)容
FileReader 讀取后的文件不會返回給FileReader 本身， 而是存儲在了 result 中
HTML
<input type="file" id="file" multiple="multiple">
<div id="imgDiv"></div>
JS
var result = document.getElementById("result");
var file = document.getElementById("file");
file.change=function(){
var file = file.files[0]
var reader=new FileReader();
reader.readAsBinaryString(file);
reader.onload=function (e){
imgDiv.innerHTML='<img src="'+this.result+'" alt=""/>'
console.log(this) // 打印出轉(zhuǎn)換后的 file 文件對象
}
}
