欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實(shí)現(xiàn)Base64編碼轉(zhuǎn)換

 更新時(shí)間：2016年04月23日 15:00:27   作者：賴祥燃  
這篇文章主要介紹了JavaScript實(shí)現(xiàn)Base64編碼轉(zhuǎn)換的相關(guān)資料,非常簡(jiǎn)單實(shí)用，需要的朋友可以參考下

簡(jiǎn)介

Base64是一種基于64個(gè)可打印字符來(lái)表示二進(jìn)制數(shù)據(jù)的表示方法。由于2的6次方等于64，所以每6個(gè)比特為一個(gè)單元，對(duì)應(yīng)某個(gè)可打印字符。三個(gè)字節(jié)有24個(gè)比特，對(duì)應(yīng)于4個(gè)Base64單元，即3個(gè)字節(jié)需要用4個(gè)可打印字符來(lái)表示。它可用來(lái)作為電子郵件的傳輸編碼。在Base64中的可打印字符包括字母A-Z、a-z、數(shù)字0-9，這樣共有62個(gè)字符，此外的兩個(gè)可打印符號(hào)在不同的系統(tǒng)中而不同，一般為+和/。

轉(zhuǎn)換原理

Base64的直接數(shù)據(jù)源是二進(jìn)制序列(Binary Sequence)。當(dāng)然，你也可以將圖片、文本和音視頻轉(zhuǎn)換成二進(jìn)制序列，再然后轉(zhuǎn)換為Base64編碼。我們這里討論的是如何將二進(jìn)制轉(zhuǎn)換為Base64編碼，對(duì)于如何將圖片，文本和音視頻轉(zhuǎn)換為二進(jìn)制序列敬請(qǐng)期待。

在轉(zhuǎn)換前，先定義一張索引表，這張表規(guī)定了如何轉(zhuǎn)換：

轉(zhuǎn)換的時(shí)候我們先將二進(jìn)制序列分組，每6個(gè)比特為一組。但是如果編碼的字節(jié)數(shù)不能被3整除，那么最后就會(huì)多出1個(gè)或兩個(gè)字節(jié)，可以使用下面的方法進(jìn)行處理：先使用0字節(jié)值在末尾補(bǔ)足，使其能夠被3整除，然后再進(jìn)行base64的編碼。在編碼后的base64文本后加上一個(gè)或兩個(gè)'='號(hào)，代表補(bǔ)足的字節(jié)數(shù)。也就是說(shuō)，當(dāng)最后剩余一個(gè)八位字節(jié)（一個(gè)byte）時(shí)，最后一個(gè)6位的base64字節(jié)塊有四位是0值，最后附加上兩個(gè)等號(hào)；如果最后剩余兩個(gè)八位字節(jié)（2個(gè)byte）時(shí)，最后一個(gè)6位的base字節(jié)塊有兩位是0值，最后附加一個(gè)等號(hào)。 參考下表：

JavaScript實(shí)現(xiàn)Base64

原理明白了以后，實(shí)現(xiàn)起來(lái)就很容易了。

define(function(require, exports, module) {
 
  var code = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".split(""); //索引表
 
  /**
   * @author laixiangran@163.com
   * @description 將二進(jìn)制序列轉(zhuǎn)換為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@163.com
   * @description 將base64編碼轉(zhuǎn)換為二進(jìn)制序列
   * @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@163.com
   * @description 將字符轉(zhuǎn)換為二進(jìn)制序列
   * @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@163.com
   * @description 將二進(jìn)制序列轉(zhuǎn)換為字符串
   * @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));
  }
})

將圖片數(shù)據(jù)進(jìn)行Base64編碼

將圖片數(shù)據(jù)轉(zhuǎn)換為Base64，首先要獲取到圖片的二進(jìn)制數(shù)據(jù)。圖片的二進(jìn)制數(shù)據(jù)可以通過(guò)canvas接口得到。具體實(shí)現(xiàn)為：

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);
}

取到圖片的二進(jìn)制數(shù)據(jù)后，接下來(lái)就要進(jìn)行編碼了。因?yàn)閳D片不僅包含像素信息，還包含長(zhǎng)度，寬度信息。所以在編碼像素信息的同時(shí)也應(yīng)將寬度和高度信息按某一約定進(jìn)行編碼，我是這樣處理的：

將圖片的像素?cái)?shù)值數(shù)據(jù)轉(zhuǎn)換為二進(jìn)制序列；將寬度和高度信息組合成字符串 $$width,height$$，轉(zhuǎn)換為二進(jìn)制序列；將圖片像素信息的二進(jìn)制序列和圖片寬高度的二進(jìn)制序列組合起來(lái)，然后再進(jìn)行Base64的編碼

具體實(shí)現(xiàn)為：

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數(shù)據(jù)進(jìn)行解碼

解碼是編碼的逆過(guò)程。過(guò)程大致為：

將圖片的Base64信息進(jìn)行解碼，得到包含圖片像素信息和寬高度信息的二進(jìn)制序列；然后將這個(gè)二進(jìn)制序列解碼成字符串，獲取高度和寬度信息；去除二進(jìn)制序列中的高度和寬度信息，得到像素信息；根據(jù)像素信息生成像素矩陣；根據(jù)像素矩陣、寬度和高度創(chuàng)建圖片對(duì)象ImageData；利用putImageData將圖像繪制出來(lái)。

具體的代碼實(shí)現(xiàn)為：

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);
 
}

相關(guān)文章

最新評(píng)論