Base64 的原理、實現及應用

Natumsol發表於2016-04-06

簡介

Base64是一種基於64個可列印字元來表示二進位制資料的表示方法。由於2的6次方等於64，所以每6個位元為一個單元，對應某個可列印字元。三個位元組有24個位元，對應於4個Base64單元，即3個位元組需要用4個可列印字元來表示。它可用來作為電子郵件的傳輸編碼。在Base64中的可列印字元包括字母A-Z、a-z、數字0-9，這樣共有62個字元，此外的兩個可列印符號在不同的系統中而不同，一般為+和/。

轉換原理

Base64的直接資料來源是二進位制序列(Binary Sequence)。當然，你也可以將圖片、文字和音視訊轉換成二進位制序列，再然後轉換為Base64編碼。我們這裡討論的是如何將二進位制轉換為Base64編碼，對於如何將圖片，文字和音視訊轉換為二進位制序列敬請期待。

在轉換前，先定義一張索引表，這張表規定了如何轉換。

轉換的時候我們先將二進位制序列分組，每6個位元為一組。但是如果編碼的位元組數不能被3整除，那麼最後就會多出1個或兩個位元組，可以使用下面的方法進行處理：先使用0位元組值在末尾補足，使其能夠被3整除，然後再進行base64的編碼。在編碼後的base64文字後加上一個或兩個’=’號，代表補足的位元組數。也就是說，當最後剩餘一個八位位元組（一個byte）時，最後一個6位的base64位元組塊有四位是0值，最後附加上兩個等號；如果最後剩餘兩個八位位元組（2個byte）時，最後一個6位的base位元組塊有兩位是0值，最後附加一個等號。參考下表：

用JavaScript實現Base64

原理明白了以後，實現起來就很容易了。

define(function(require, exports, module) {

    var code = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".split(""); //索引表

    /**
     * @author natumsol@gmail.com
     * @description 將二進位制序列轉換為Base64編碼
     * @param  {String}
     * @return {String}
     */
    function binToBase64(bitString) {
        var result = "";
        var tail = bitString.length % 6;
        var bitStringTemp1 = bitString.substr(0, bitString.length - tail);
        var bitStringTemp2 = bitString.substr(bitString.length - tail, tail);
        for (var i = 0; i &lt; bitStringTemp1.length; i += 6) {
            var index = parseInt(bitStringTemp1.substr(i, 6), 2);
            result += code[index];
        }
        bitStringTemp2 += new Array(7 - tail).join("0");
        if (tail) {
            result += code[parseInt(bitStringTemp2, 2)];
            result += new Array((6 - tail) / 2 + 1).join("=");
        }
        return result;
    }

    /**
     * @author natumsol@gmail.com
     * @description 將base64編碼轉換為二進位制序列
     * @param  {String}
     * @return {String}
     */
    function base64ToBin(str) {
        var bitString = "";
        var tail = 0;
        for (var i = 0; i &lt; str.length; i++) {
            if (str[i] != "=") {
                var decode = code.indexOf(str[i]).toString(2);
                bitString += (new Array(7 - decode.length)).join("0") + decode;
            } else {
                tail++;
            }
        }
        return bitString.substr(0, bitString.length - tail * 2);
    }

    /**
     * @description 將字元轉換為二進位制序列
     * @param  {String} str
     * @return {String}    
     */
    function stringToBin(str) {
        var result = "";
        for (var i = 0; i &lt; str.length; i++) {
            var charCode = str.charCodeAt(i).toString(2);
            result += (new Array(9 - charCode.length).join("0") + charCode);
        }
        return result;
    }
    /**
     * @description 將二進位制序列轉換為字串
     * @param {String} Bin
     */
    function BinToStr(Bin) {
        var result = "";
        for (var i = 0; i &lt; Bin.length; i += 8) {
            result += String.fromCharCode(parseInt(Bin.substr(i, 8), 2));
        }
        return result;
    }
    exports.base64 = function(str) {
        return binToBase64(stringToBin(str));
    }
    exports.decodeBase64 = function(str) {
        return BinToStr(base64ToBin(str));
    }
})

define(function(require, exports, module) {

var code = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".split(""); //索引表

/**

* @author natumsol@gmail.com

* @description 將二進位制序列轉換為Base64編碼

* @param {String}

* @return {String}

function binToBase64(bitString) {

var result = "";

var tail = bitString.length % 6;

var bitStringTemp1 = bitString.substr(0, bitString.length - tail);

var bitStringTemp2 = bitString.substr(bitString.length - tail, tail);

for (var i = 0; i < bitStringTemp1.length; i += 6) {

var index = parseInt(bitStringTemp1.substr(i, 6), 2);

result += code[index];

}

bitStringTemp2 += new Array(7 - tail).join("0");

if (tail) {

result += code[parseInt(bitStringTemp2, 2)];

result += new Array((6 - tail) / 2 + 1).join("=");

}

return result;

}

/**

* @author natumsol@gmail.com

* @description 將base64編碼轉換為二進位制序列

* @param {String}

* @return {String}

function base64ToBin(str) {

var bitString = "";

var tail = 0;

for (var i = 0; i < str.length; i++) {

if (str[i] != "=") {

var decode = code.indexOf(str[i]).toString(2);

bitString += (new Array(7 - decode.length)).join("0") + decode;

} else {

tail++;

}

return bitString.substr(0, bitString.length - tail * 2);

}

/**

* @description 將字元轉換為二進位制序列

* @param {String} str

* @return {String}

function stringToBin(str) {

var result = "";

for (var i = 0; i < str.length; i++) {

var charCode = str.charCodeAt(i).toString(2);

result += (new Array(9 - charCode.length).join("0") + charCode);

}

return result;

}

/**

* @description 將二進位制序列轉換為字串

* @param {String} Bin

function BinToStr(Bin) {

var result = "";

for (var i = 0; i < Bin.length; i += 8) {

result += String.fromCharCode(parseInt(Bin.substr(i, 8), 2));

}

return result;

}

exports.base64 = function(str) {

return binToBase64(stringToBin(str));

}

exports.decodeBase64 = function(str) {

return BinToStr(base64ToBin(str));

}

})

將圖片資料進行Base64編碼

將圖片資料轉換為Base64，首先要獲取到圖片的二進位制資料。圖片的二進位制資料可以通過canvas介面得到。具體實現為：

function getCanvas(w, h) {
		var c = document.createElement('canvas');
		c.width = w;
		c.height = h;
		return c;
	}

function getPixels(img) {
	var c = getCanvas(img.width, img.height);
	var ctx = c.getContext('2d');
	ctx.drawImage(img, 0, 0);
	return ctx.getImageData(0, 0, c.width, c.height);
}

function getCanvas(w, h) {

var c = document.createElement('canvas');

c.width = w;

c.height = h;

return c;

}

function getPixels(img) {

var c = getCanvas(img.width, img.height);

var ctx = c.getContext('2d');

ctx.drawImage(img, 0, 0);

return ctx.getImageData(0, 0, c.width, c.height);

}

取到圖片的二進位制資料後，接下來就要進行編碼了。因為圖片不僅包含畫素資訊，還包含長度，寬度資訊。所以在編碼畫素資訊的同時也應將寬度和高度資訊按某一約定進行編碼，我是這樣處理的：

將圖片的畫素數值資料轉換為二進位制序列；
將寬度和高度資訊組合成字串$$width,height$$，轉換為二進位制序列；
將圖片畫素資訊的二進位制序列和圖片寬高度的二進位制序列組合起來，然後再進行Base64的編碼

具體實現為：

function img2Base64(img) {
	var imgData = getPixels(img).data;
	var imgWidth = getPixels(img).width;
	var imgHeight = getPixels(img).height;
	var bin = "";
	for (var i = 0; i &lt; imgData.length; i++) {
		bin += base.numToString(imgData[i]);
	}
	bin = bin + base.stringToBin("$$" + imgWidth + "," + imgHeight + "$$");
	return base.binToBase64(bin);
}

function img2Base64(img) {

var imgData = getPixels(img).data;

var imgWidth = getPixels(img).width;

var imgHeight = getPixels(img).height;

var bin = "";

for (var i = 0; i < imgData.length; i++) {

bin += base.numToString(imgData[i]);

}

bin = bin + base.stringToBin("$$" + imgWidth + "," + imgHeight + "$$");

return base.binToBase64(bin);

}

將圖片Base64資料進行解碼

解碼是編碼的逆過程。過程大致為：

將圖片的Base64資訊進行解碼，得到包含圖片畫素資訊和寬高度資訊的二進位制序列；
然後將這個二進位制序列解碼成字串，獲取高度和寬度資訊；
去除二進位制序列中的高度和寬度資訊，得到畫素資訊；
根據畫素資訊生成畫素矩陣；
根據畫素矩陣、寬度和高度建立圖片物件ImageData；
利用putImageData將影象繪製出來。

具體的程式碼實現為：

function paint(imgData) {
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");
		ctx.fillRect(0, 0, imgData.width, imgData.height);
		ctx.putImageData(imgData, 0, 0);
	}

function base642img(data) {
	var str = base.BinToStr(base.base64ToBin(data));
	var imgWidth = str.match(/\$\$(\d+),(\d+)\$\$$/, "")[1];
	var imgHeight = str.match(/\$\$(\d+),(\d+)\$\$$/, "")[2]
	var imgData = base.base64ToBin(data).replace(base.stringToBin("$$" + imgWidth + "," + imgHeight + "$$"), "");

	var ImageDataArray = new Uint8ClampedArray(imgWidth * imgHeight * 4);
	for (var i = 0; i &lt; ImageDataArray.length; i++) {
		ImageDataArray[i] = parseInt(imgData.substr(i * 8, 8), 2);
	}
	return new ImageData(ImageDataArray, imgWidth, imgHeight);

}

function paint(imgData) {

var canvas = document.getElementById("myCanvas");

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

ctx.fillRect(0, 0, imgData.width, imgData.height);

ctx.putImageData(imgData, 0, 0);

}

function base642img(data) {

var str = base.BinToStr(base.base64ToBin(data));

var imgWidth = str.match(/\$\$(\d+),(\d+)\$\$$/, "")[1];

var imgHeight = str.match(/\$\$(\d+),(\d+)\$\$$/, "")[2]

var imgData = base.base64ToBin(data).replace(base.stringToBin("$$" + imgWidth + "," + imgHeight + "$$"), "");

var ImageDataArray = new Uint8ClampedArray(imgWidth * imgHeight * 4);

for (var i = 0; i < ImageDataArray.length; i++) {

ImageDataArray[i] = parseInt(imgData.substr(i * 8, 8), 2);

}

return new ImageData(ImageDataArray, imgWidth, imgHeight);

}

DEMO演示

線上演示： DEMO
原始碼請移步 Github

打賞支援我寫出更多好文章，謝謝！
打賞作者

打賞支援我寫出更多好文章，謝謝！

任選一種支付方式

Base64 的原理、實現及應用

base64編碼的原理及實現
2016-08-19
關於base64編碼的原理及實現
2018-03-10
base64的實現原理
2021-07-03
Base64原理和實現
2020-12-23
JavaScript模板引擎的應用場景及實現原理
2014-10-30
JavaScript
Cookie、Session、JWT在koa中的應用及實現原理
2021-08-04
CookieSessionJWT
外網訪問內網應用原理分析及實現
2014-04-22
內網
cortex-a8原理實踐及應用
2021-11-09
Vue 3 響應式原理及實現
2020-06-08
Vue
Java RPC原理及Dubbo的實踐應用
2019-04-09
JavaRPC
MVP實現Android應用層開發原理及過程
2015-07-11
MVPAndroid
zookeeper原理及應用
2017-12-07
Base64加密解密原理以及程式碼實現
2014-11-09
加密解密
閉包的原理及應用
2022-04-27
加推時序系統RTS實現原理及應用簡介
2020-09-24
iOS–KVO的實現原理與具體應用
2016-05-17
iOS
xgboost原理及應用
2016-09-09
[轉]SSH原理及應用
2017-11-15
JWT實現過程及應用
2020-10-31
JWT
CRC原理及實現
2013-08-20
AOP如何實現及實現原理
2018-11-23
【字元編碼系列】Base64編碼原理以及實現
2017-12-18
字元
iOS應用程式的脫殼實現原理淺析
2019-03-04
iOS
Thunk程式的實現原理以及在iOS中的應用
2019-01-31
iOS
Android Protobuf應用及原理
2018-03-26
Android
分散式鎖的實現及原理
2019-05-20
分散式
simple-mybatis的原理及實現
2018-06-19
MyBatis
JavaScript 預解析的原理及實現
2015-03-09
JavaScript
Promise原理探究及實現
2019-07-18
Promise
KVO使用及實現原理
2019-01-11
Thunk程式的實現原理以及在iOS中的應用(二)
2019-02-27
iOS
Base64 原理
2021-08-24
Base64原理
2018-10-24
vue 單頁應用（spa）前端路由實現原理
2018-03-31
Vue前端路由
線段樹詳解（原理，實現與應用）
2015-09-09
Spring AOP 實現原理與 CGLIB 應用
2012-09-26
SpringCGLib
JavaScript 實現 Base64
2022-06-01
JavaScript
使用Apache的Base64類實現Base64加解密
2016-11-16
Apache解密

Base64 的原理、實現及應用

轉換原理

用JavaScript實現Base64

將圖片資料進行Base64編碼

將圖片Base64資料進行解碼

DEMO演示

打賞支援我寫出更多好文章，謝謝！

相關文章