什么是 Base64

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

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

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

圖片的 Base64 編碼

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

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

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

Data URL:

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

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

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

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

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

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

參考文章：

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

Base64 編碼知識，一文打盡！

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

總結(jié)

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

最新評論