三、如何使用JavaScript實(shí)現(xiàn)img轉(zhuǎn)base64
1、使用XMLHttpRequest對(duì)象獲取圖片文件并將其轉(zhuǎn)換成base64編碼。
function imgToBase64(url, callback){
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
imgToBase64('img/test.png', function(dataURL){
console.log(dataURL);
});
2、使用canvas元素將圖片繪制并將其轉(zhuǎn)換成base64編碼。
function imgToBase64(url, callback){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.crossOrigin = 'anonymous';
img.onload = function() {
canvas.width = this.width;
canvas.height = this.height;
ctx.drawImage(this, 0, 0);
callback(canvas.toDataURL());
};
img.src = url;
}
imgToBase64('img/test.png', function(dataURL){
console.log(dataURL);
});
四、img轉(zhuǎn)base64的優(yōu)缺點(diǎn)
優(yōu)點(diǎn):
1、減少HTTP請(qǐng)求,提升頁(yè)面加載速度。
2、能夠?qū)D片直接存儲(chǔ)在HTML、CSS或JavaScript文件中,便于代碼維護(hù)。
3、能夠在不支持圖片格式的瀏覽器中正常顯示圖片。
缺點(diǎn):
1、base64編碼會(huì)將原始圖片的大小增加1/3,導(dǎo)致數(shù)據(jù)傳輸量增加。
2、base64編碼的圖片一旦被修改,就需要重新上傳整個(gè)文件。
3、base64編碼的圖片對(duì)于較大的圖片不利于緩存和頁(yè)面性能。
五、結(jié)語(yǔ)
img轉(zhuǎn)base64是一種優(yōu)化前端工作的方法,適用于一些小尺寸的圖片,能夠提升頁(yè)面的加載速度和用戶體驗(yàn)。但是對(duì)于一些較大的圖片,仍然應(yīng)該使用標(biāo)簽并優(yōu)化圖片本身,以減少HTTP請(qǐng)求。