JavaScript Base64编码原理及图片编解码实现

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编码的转换过程。关于如何将图片、文本或音视频转换为二进制序列，将在后续内容中探讨。

在转换前，需定义一张索引表，用于规定二进制数据到Base64字符的映射规则：

Base64编码基础与原理

转换时，先将二进制序列按每6个比特位进行分组。若编码的字节数无法被3整除，末尾会剩余1个或2个字节。处理方法是：在末尾补0字节，使总字节数能被3整除，再进行Base64编码。编码后的Base64文本末尾需添加一个或两个等号（=），以表示补足的字节数。具体而言，若最后剩余一个八位字节（1 byte），最后一个6位Base64块有4位为0，此时附加两个等号；若剩余两个八位字节（2 bytes），最后一个6位块有2位为0，此时附加一个等号。参考下表：

Base64编码基础与原理

JavaScript实现Base64编码

JavaScript实现Base64

理解原理后，实现过程相对简单。


define(function(require, exports, module) {
 
  var code = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".split(""); //索引表
 
  /**
   * @author laixiangran@163.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 laixiangran@163.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);
  }
 
  /**
   * @author laixiangran@163.com
   * @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;
  }

  /**
   * @author laixiangran@163.com
   * @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));
  }
})

图片数据的Base64编码

将图片数据进行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 &lt; imgData.length; i++) {
    bin += base.numToString(imgData[i]);
  }
  bin = bin + base.stringToBin("$$" + imgWidth + "," + imgHeight + "$$");
  return base.binToBase64(bin);
}

图片Base64数据的解码

将图片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);
 
}

JavaScript实现Base64编码与图片转换详解

Base64编码基础与原理

JavaScript实现Base64编码

图片数据的Base64编码

图片Base64数据的解码

实用工具推荐