Base64 encode decode image

前言

最近在修福報，深深覺得，一個程序員或者成年人，最大的敵人就是時間，沒有時間，就會陷入焦慮的怪圈，一直出不來。

What is Base64

Base64 是一組相似的二進制到文本（binary-to-text）的編碼規則，使得二進制數據在解釋成 radix-64 的表現形式後能夠用 ASCII 字符串的格式表示出來。Base64 這個詞出自一種 MIME 數據傳輸編碼。 ----- from mdn

對於前端而言，Base64 使用範圍廣泛，可以對 ASCII 碼進行編碼，也是作爲 雪碧圖 的一種備選方案，即增加運行時的體積，但是減少了靜態資源的請求數。對圖片的 Base64 編碼見 Advanced

How to use

瀏覽器 API

// 編碼

let encodedData = window.btoa("Hello, world");  // 此時 encodedData = 'SGVsbG8sIHdvcmxk'



// 解碼

let decodedData = window.atob(encodedData);    // 此時 decodedData = ‘Hello, world’

Advanced

對於常見的 ASCII 可以解析，那麼對於圖片，自然有另外的方法：

法一： 通過 fetch 圖片的 response.arrayBuffer() 來獲取二進制緩衝流來進行編碼。

const image = `https://www.xxxxx.xxxx/abc.png`;

fetch(image).then(response => response.buffer())

            .then(buffer => buffer.toString("base64"));

目前 NPM 上最活躍的 imageToBase64 中, 是這麼寫的： imageToBase64

法二：通過 Canvas

// 大致思路:

document.querySelector('canvas').getContext('webgl').canvas.toDataURL('image/jpeg', 0.5);

第一種，通過圖片 url 來獲取 base64

function getUrlBase64(url, ext, callback) {

    let canvas = document.createElement("canvas");

    const ctx = canvas.getContext("2d");

    const img = new Image;

    img.crossOrigin = 'Anonymous';

    img.src = url;

    img.onload = function () {

        canvas.height = 60;

        canvas.width = 85;

        ctx.drawImage(img, 0, 0, 60, 85);

        const dataURL = canvas.toDataURL("image/" + ext);

        callback.call(this, dataURL);

        canvas = null;

    };

}

第二種，parameter 直接是 image

function getImageBase64(img, ext) {

    var canvas = document.createElement("canvas");   //創建canvas DOM元素，並設置其寬高和圖片一樣

    canvas.width = img.width;

    canvas.height = img.height;

    var ctx = canvas.getContext("2d");

    ctx.drawImage(img, 0, 0, img.width, img.height); //使用畫布畫圖

    var dataURL = canvas.toDataURL("image/" + ext);  //返回的是一串Base64編碼的URL並指定格式

    canvas = null; //釋放

    return dataURL;

}