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

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > img轉(zhuǎn)base64的多方面詳解

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

來(lái)源:千鋒教育
發(fā)布人:xqq
時(shí)間: 2023-11-24 15:50:08 1700812208

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

聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專(zhuān)屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
formdata格式傳遞參數(shù)詳解

一、前端formdata格式傳遞參數(shù)前端通過(guò)表單或ajax請(qǐng)求時(shí),通常使用formdata格式傳遞參數(shù)。利用表單的方式傳遞參數(shù)相對(duì)簡(jiǎn)單,只需要設(shè)置表單的en...詳情>>

2023-11-24 18:14:08
詳解pd.ExcelWriter

在Python的數(shù)據(jù)科學(xué)領(lǐng)域,Pandas庫(kù)可以說(shuō)是一個(gè)不可或缺的存在,而其中一個(gè)重要成員就是pd.ExcelWriter。pd.ExcelWriter作為Pandas庫(kù)中一個(gè)用于...詳情>>

2023-11-24 17:48:56
LocalDate轉(zhuǎn)String

一、LocalDate轉(zhuǎn)String的基本概念在Java 8中,引入了一個(gè)新的日期時(shí)間API,其中包括了三個(gè)關(guān)鍵類(lèi):LocalDate、LocalTime和LocalDateTime。各個(gè)...詳情>>

2023-11-24 17:16:32
網(wǎng)頁(yè)視頻自動(dòng)播放下一個(gè)的實(shí)現(xiàn)方法

一、JavaScript實(shí)現(xiàn)JavaScript是實(shí)現(xiàn)網(wǎng)頁(yè)視頻自動(dòng)播放下一個(gè)的主流方式之一。通過(guò)編寫(xiě)JavaScript代碼控制視頻的播放和暫停,實(shí)現(xiàn)自動(dòng)播放下一個(gè)...詳情>>

2023-11-24 17:05:44
jssplit()函數(shù)全方位解析

在JavaScript編程中,字符串是一種常見(jiàn)的數(shù)據(jù)類(lèi)型。而在處理字符串時(shí),分隔字符串也是經(jīng)常用到的操作。這時(shí)候,jssplit()函數(shù)就是我們調(diào)用的工...詳情>>

2023-11-24 16:40:32