什么是 Base64

Base64 是網(wǎng)絡(luò)中存儲(chǔ)和傳輸?shù)亩M(jìn)制數(shù)據(jù)的普遍用法。Base64 一個(gè)字節(jié)只能表示 64 種情況，且編碼格式每個(gè)字節(jié)的前兩位都只能是 0，使用剩下的 6 位表示內(nèi)容。

Base64 最早是應(yīng)用在郵件傳輸協(xié)議中的。當(dāng)時(shí)郵件傳輸協(xié)議只支持 ASCII 字符傳遞，使用 ASCII 碼來(lái)表示所有的英文字符。但是如果要在文件中傳輸圖片、視頻等資源的話，這些資源轉(zhuǎn)成 ASCII 的時(shí)候會(huì)出現(xiàn)非英文數(shù)字的情況。而且郵件中還存在很多控制字符，這些控制字符又會(huì)成為不可見(jiàn)字符。而且，非英文字符和控制字符在傳輸過(guò)程中很容易產(chǎn)生錯(cuò)誤，影響郵件的正確傳輸。為此才有了誕生了一個(gè)新的編碼規(guī)則：

把二進(jìn)制以 3 個(gè)字節(jié)為一組，再把每組的 3 個(gè)字節(jié)（24 位）轉(zhuǎn)換成 4 個(gè) 6 位，每 6 位根據(jù)查表對(duì)應(yīng)一個(gè) ASCII 符號(hào)。

圖片的 Base64 編碼

我們都知道圖片在網(wǎng)頁(yè)中的使用方法通常是使用 img 標(biāo)簽的形式，而 img 標(biāo)簽的 src 屬性會(huì)指定一個(gè)遠(yuǎn)程服務(wù)器上的資源。在網(wǎng)頁(yè)加載到瀏覽器中時(shí)，瀏覽器會(huì)針對(duì)每個(gè)外部資源都向服務(wù)器發(fā)送一次拉取資源請(qǐng)求。但是這是非常占用網(wǎng)絡(luò)資源的。 而我們經(jīng)常所說(shuō)的 Base64 存儲(chǔ)展示，則是使用了Data URL 技術(shù)。

我們選擇 Data URL 技術(shù)優(yōu)勢(shì)在于：

• 減少 HTTP 請(qǐng)求；
• 避免跨域問(wèn)題；
• 可像單獨(dú)圖片一樣使用，也可以結(jié)合CSS Sprites（雪碧圖）使用

Data URL:

Data URLs，即前綴為 data: 協(xié)議的 URL，其允許內(nèi)容創(chuàng)建者向文檔中嵌入小文件。

Data URLs 由四個(gè)部分組成：前綴 (data:)、指示數(shù)據(jù)類型的 MIME 類型、如果非文本則為可選的base64標(biāo)記、數(shù)據(jù)本身：

data:[<mediatype>][;base64],<data>

圖片轉(zhuǎn) Base64 的代碼 

由前端程序員來(lái)將圖片轉(zhuǎn)為 Base64 編碼的場(chǎng)景還是非常多的，而且網(wǎng)上搜索的方法好多都沒(méi)法用??，這邊給大家兩個(gè)絕對(duì)可以用的哈~

Promise 實(shí)現(xiàn)

/**
 * @param url 圖片路徑
 */
export function getUrlBase64(url) {
    return new Promise((resolve, reject) => {
        let canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        let img = new Image();
        img.crossOrigin = "Anonymous"; //解決Canvas.toDataURL 圖片跨域問(wèn)題
        img.src = url;
        img.onload = function () {
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0, img.width, img.height); //參數(shù)可自定義
            const dataURL = canvas.toDataURL("image/jpeg", 1); //獲取Base64編碼
            resolve(dataURL);
            canvas = null; //清除canvas元素
            img = null; //清除img元素
        };
        img.onerror = function () {
            reject(new Error("Could not load image at " + url));
        };
    });
}

回調(diào)函數(shù)實(shí)現(xiàn)

/**
 * @param url 圖片路徑
 * @param callback 結(jié)果回調(diào)
 */
export function getUrlBase64Callback(url, callback) {
    let canvas = document.createElement("canvas"); //創(chuàng)建canvas DOM元素
    const ctx = canvas.getContext("2d");
    const img = new Image();
    img.crossOrigin = "Anonymous";
    img.src = url;
    img.onload = function () {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0, img.width, img.height);
        const dataURL = canvas.toDataURL("image/jpeg", 1); //可選取多種模式
        callback.call(this, dataURL); //回掉函數(shù)獲取Base64編碼
        canvas = null;
    };
}

Base64 圖片編碼并不完美

我不是故意找茬

• Base64 編碼的數(shù)據(jù)體積通常是原數(shù)據(jù)的體積 4/3，也就是 Data URL 形式的圖片會(huì)比二進(jìn)制格式的圖片體積大 1/3。
• Data URL 形式的圖片不會(huì)被瀏覽器緩存，通常編碼內(nèi)容會(huì)包含在CSS，JS文件當(dāng)中以此被瀏覽器緩存。
• 網(wǎng)頁(yè)加載圖片雖然不用訪問(wèn)服務(wù)器了，但因?yàn)閎ase64格式的內(nèi)容太多，所以加載網(wǎng)頁(yè)的速度會(huì)降低，可能會(huì)影響用戶的體驗(yàn)。
• base64格式的文本內(nèi)容較多，存儲(chǔ)在數(shù)據(jù)庫(kù)中增大了數(shù)據(jù)庫(kù)服務(wù)器的壓力（點(diǎn)名一下把大圖片轉(zhuǎn)base64格式存到數(shù)據(jù)庫(kù)的同學(xué)??）
• 頁(yè)面解析 CSS 生成的 CSSOM 時(shí)間增加。CSSOM 階段阻止任何東西渲染，這意味著在 CSS 沒(méi)處理好之前所有東西都不會(huì)展示，而如果CSS文件中混入了Base64，那么因?yàn)槲募w積的大幅增長(zhǎng)，解析時(shí)間會(huì)增長(zhǎng)到十倍以上。

參考文章：

【前端攻略】：玩轉(zhuǎn)圖片Base64編碼

Base64 編碼知識(shí)，一文打盡！

圖片轉(zhuǎn)換成base64格式的優(yōu)缺點(diǎn)

總結(jié)

到此這篇關(guān)于JavaScript圖片的Base64編碼以及轉(zhuǎn)換的文章就介紹到這了,更多相關(guān)JS圖片Base64編碼轉(zhuǎn)換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論