JavaScript实现Base64编码转换

JavaScript实现Base64编码转换
简介
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 laixiangran@
* @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 laixiangran@
* @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);
}
/**
* @author laixiangran@
* @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;
}
/**
* @author laixiangran@
* @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);
}
取到图⽚的⼆进制数据后，接下来就要进⾏编码了。

因为图⽚不仅包含像素信息，还包含长度，宽度信息。

所以在编码像素信息的同时也应将宽度和⾼度信息按某⼀约定进⾏编码，我是这样处理的：
将图⽚的像素数值数据转换为⼆进制序列；将宽度和⾼度信息组合成字符串$$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 < 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 < ImageDataArray.length; i++) {
ImageDataArray[i] = parseInt(imgData.substr(i * 8, 8), 2);
}
return new ImageData(ImageDataArray, imgWidth, imgHeight);
}。