img轉(zhuǎn)base64的多方面詳解

三、如何使用JavaScript實現(xiàn)img轉(zhuǎn)base64

1、使用XMLHttpRequest對象獲取圖片文件并將其轉(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)缺點

優(yōu)點：

1、減少HTTP請求，提升頁面加載速度。

2、能夠?qū)D片直接存儲在HTML、CSS或JavaScript文件中，便于代碼維護。

3、能夠在不支持圖片格式的瀏覽器中正常顯示圖片。

缺點：

1、base64編碼會將原始圖片的大小增加1/3，導(dǎo)致數(shù)據(jù)傳輸量增加。

2、base64編碼的圖片一旦被修改，就需要重新上傳整個文件。

3、base64編碼的圖片對于較大的圖片不利于緩存和頁面性能。

五、結(jié)語

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