三、如何使用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請求，提升頁面加載速度。

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ì)于較大的圖片不利于緩存和頁面性能。

五、結(jié)語

img轉(zhuǎn)base64是一種優(yōu)化前端工作的方法，適用于一些小尺寸的圖片，能夠提升頁面的加載速度和用戶體驗(yàn)。但是對(duì)于一些較大的圖片，仍然應(yīng)該使用標(biāo)簽并優(yōu)化圖片本身，以減少HTTP請求。