img轉base64的多方面詳解

一、什麼是img轉base64

img轉base64是指將圖片文件轉換成base64編碼格式的字符串的過程。base64編碼是一種用64個字符表示二進制數據的方法，它可以將二進制數據以可讀形式顯示出來，通常用於在網絡上傳輸數據。

在前端開發中，img轉base64能夠將圖片數據直接存儲在HTML、CSS或JavaScript文件中，而不需要使用標籤的src屬性引用外部圖片文件，這樣能夠提升頁面加載速度，並且減少HTTP請求。

二、img轉base64的使用場景

1、用於替代圖片文件，減少HTTP請求。

   background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgA...)

2、用於網站圖標、Logo等小圖片的使用。

    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+PhfDwAD...

3、用於實現CSS3的image()函數。

    @supports (background: image( url("test.png") ) ){
       .box {background: -webkit-image( url("test.png") );}
    }

4、用於顯示用戶上傳的圖片預覽。

    function handleFileSelect(evt) {
         var files = evt.target.files; // FileList object
         var file = files[0];
         var reader = new FileReader();
         reader.onloadend = function() {
             document.getElementById('preview').src = reader.result;
         }
         reader.readAsDataURL(file);
     }
     <input type="file" onchange="handleFileSelect(event)">
     <img id="preview">

三、如何使用JavaScript實現img轉base64

1、使用XMLHttpRequest對象獲取圖片文件並將其轉換成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元素將圖片繪製並將其轉換成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轉base64的優缺點

優點：

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

2、能夠將圖片直接存儲在HTML、CSS或JavaScript文件中，便於代碼維護。

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

缺點：

1、base64編碼會將原始圖片的大小增加1/3，導致數據傳輸量增加。

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

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

五、結語

img轉base64是一種優化前端工作的方法，適用於一些小尺寸的圖片，能夠提升頁面的加載速度和用戶體驗。但是對於一些較大的圖片，仍然應該使用標籤並優化圖片本身，以減少HTTP請求。