国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > img轉base64的多方面詳解

img轉base64的多方面詳解

來源:千鋒教育
發布人:xqq
時間: 2023-11-24 15:50:08 1700812208

三、如何使用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請求。

tags: img轉base64
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT