9159金沙游艺场

图片 6
Linux常用命令学习
图片 2
[C#6] 5-自动属性增强

将字符串转换成gb2312或者utf-8编码的参数(js版)

Base64 的原理、实现及应用

2016/04/06 · 基础技术 ·
1 评论 ·
Base64

本文作者: 伯乐在线 –
Natumsol
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

简介

Base64是一种基于64个可打印字符来表示二进制数据的表示方法。由于2的6次方等于64,所以每6个比特为一个单元,对应某个可打印字符。三个字节有24个比特,对应于4个Base64单元,即3个字节需要用4个可打印字符来表示。它可用来作为电子邮件的传输编码。在Base64中的可打印字符包括字母A-Za-z、数字0-9,这样共有62个字符,此外的两个可打印符号在不同的系统中而不同,一般为+/

复制代码 代码如下:

在很多时候,我们直接在url中传递中文参数时,读到的中文都是乱码,那么我们应该怎么将这些参数转换呢?

转换原理

Base64的直接数据源是二进制序列(Binary
Sequence)。当然,你也可以将图片、文本和音视频转换成二进制序列,再然后转换为Base64编码。我们这里讨论的是如何将二进制转换为Base64编码,对于如何将图片,文本和音视频转换为二进制序列敬请期待。

在转换前,先定义一张索引表,这张表规定了如何转换。
图片 1
转换的时候我们先将二进制序列分组,每6个比特为一组。但是如果编码的字节数不能被3整除,那么最后就会多出1个或两个字节,可以使用下面的方法进行处理:先使用0字节值在末尾补足,使其能够被3整除,然后再进行base64的编码。在编码后的base64文本后加上一个或两个’=’号,代表补足的字节数。也就是说,当最后剩余一个八位字节(一个byte)时,最后一个6位的base64字节块有四位是0值,最后附加上两个等号;如果最后剩余两个八位字节(2个byte)时,最后一个6位的base字节块有两位是0值,最后附加一个等号。
参考下表:
图片 2

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
/>
<style>
body{padding-left:75px;background-color:beige}
</style>
<script>
///////////////////////////
//base64编码的GIF图像解码
//By Mozart0
//2005/10/29
////////////////////

下面我们来介绍一下方法
1、我们新建一个 UrlEncode.js 然后将下面的代码拷贝进去

用JavaScript实现Base64

原理明白了以后,实现起来就很容易了。

JavaScript

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)); } })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
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));
    }
})

//建立GIF类的对象
//类GIF在此函数内部定义
//str64:gif文件的Base64编码字符串
//成功返回创建的GIF对象
//失败返回null
function getGif(str64){
var bytes=decodeBase64(str64);
if(!bytes){
alert(“错误:无效的Base64编码”);
return null;
}
var gif=new GIF();
for(var i=0;i<6;i++)
gif.version+=String.fromCharCode(bytes[i]);
if(gif.version.slice(0,3)!=”GIF”){
alert(“错误:非Gif图像格式”);
return null;
}
gif.width=bytes[i]|(bytes[i+1]<<8);
gif.height=bytes[i+2]|(bytes[i+3]<<8);
var f=bytes[i+4];
gif.colorResolution=(f>>4&0x7)+1;
gif.sorted=(f&0x8)?true:false;
gif.backgroundIndex=bytes[i+5];
gif.pixelAspectRadio=bytes[i+6];
if(f&0x80){
gif.globalPalette=[];
i+=getPalette(i+7,bytes,gif.globalPalette,2<<(f&0x7));
}
i+=7;
for(var j=i;j<bytes.length;j++)
if(bytes[j]==0x21&&bytes[j+1]==0xf9)
break;
if(j==bytes.length){
for(;i<bytes.length;i++)
if(bytes[i]==0x2c)
break;
if(i==bytes.length){
alert(“错误:找不到图像数据”);
return null;
}
var f=new GIF_Frame();
if(!getSingleFrame(i,f))
return null;
else
gif.frames.push(f);
}
else{
i=j;
do{
var f=new GIF_Frame();
var t=getSingleFrame(i,f);
if(!t)
return null;
gif.frames.push(f);
for(i+=t;i<bytes.length;i++)
if(bytes[i]==0x21&&bytes[i+1]==0xf9)
break;
}
while(i<bytes.length);
}
return gif;

复制代码 代码如下:

将图片数据进行Base64编码

将图片数据转换为Base64,首先要获取到图片的二进制数据。图片的二进制数据可以通过canvas接口得到。具体实现为:

JavaScript

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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);
}

取到图片的二进制数据后,接下来就要进行编码了。因为图片不仅包含像素信息,还包含长度,宽度信息。所以在编码像素信息的同时也应将宽度和高度信息按某一约定进行编码,我是这样处理的:

  1. 将图片的像素数值数据转换为二进制序列;
  2. 将宽度和高度信息组合成字符串$$width,height$$,转换为二进制序列;
  3. 将图片像素信息的二进制序列和图片宽高度的二进制序列组合起来,然后再进行Base64的编码

具体实现为:

JavaScript

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

1
2
3
4
5
6
7
8
9
10
11
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 getPalette(pos,s,d,len){
len*=3;
for(var i=pos;i<pos+len;i+=3)
d.push(‘#’+(s[i]<=0xf?”0″:””)+s[i].toString(16)
+(s[i+1]<=0xf?”0″:””)+s[i+1].toString(16)
+(s[i+2]<=0xf?”0″:””)+s[i+2].toString(16));
return len;
}

//JS版的Server.UrlEncode编码函数
String.prototype.UrlEncodeGB2312 = function () {
var str = this;
str = str.replace(/./g, function (sHex) {
window.EnCodeStr = “”;
window.sHex = sHex;
window.execScript(‘window.EnCodeStr=Hex(Asc(window.sHex))’,
“vbscript”);
return window.EnCodeStr.replace(/../g, “%{blogcontent}amp;”);
});
return str;
}
String.prototype.UrlEncode = function () {
var s = escape(this);
var sa = s.split(“%”);
var retV = “”, retE = “”;
if (sa[0] != “”) {
retV = sa[0];
}
for (var i = 1; i < sa.length; i++) {
if (sa[i].substring(0, 1) == “u”) {
retV += Hex2Utf8(Str2Hex(sa[i].substring(1, 5)));
if (sa[i].length > 4)
retV += sa[i].substring(5);
}
else retV += “%” + sa[i];
}
return retV;
}
function Str2Hex(s) {
var c = “”;
var n;
var ss = “0123456789ABCDEF”;
var digS = “”;
for (var i = 0; i < s.length; i++) {
c = s.charAt(i);
n = ss.indexOf(c);
digS += Dec2Dig(eval(n));
}
return digS;
}
function Dec2Dig(n1) {
var s = “”;
var n2 = 0;
for (var i = 0; i < 4; i++) {
n2 = Math.pow(2, 3 – i);
if (n1 >= n2) {
s += ‘1’;
n1 = n1 – n2;
}
else
s += ‘0’;
}
return s;
}
function Dig2Dec(s) {
var retV = 0;
if (s.length == 4) {
for (var i = 0; i < 4; i++) {
retV += eval(s.charAt(i)) * Math.pow(2, 3 – i);
}
return retV;
}
return -1;
}
function Hex2Utf8(s) {
var retS = “”;
var tempS = “”;
var ss = “”;
if (s.length == 16) {
tempS = “1110” + s.substring(0, 4);
tempS += “10” + s.substring(4, 10);
tempS += “10” + s.substring(10, 16);
var sss = “0123456789ABCDEF”;
for (var i = 0; i < 3; i++) {
retS += “%”;
ss = tempS.substring(i * 8, (eval(i) + 1) * 8);
retS += sss.charAt(Dig2Dec(ss.substring(0, 4)));
retS += sss.charAt(Dig2Dec(ss.substring(4, 8)));
}
return retS;
}
return “”;
}

将图片Base64数据进行解码

解码是编码的逆过程。过程大致为:

  1. 将图片的Base64信息进行解码,得到包含图片像素信息和宽高度信息的二进制序列;
  2. 然后将这个二进制序列解码成字符串,获取高度和宽度信息;
  3. 去除二进制序列中的高度和宽度信息,得到像素信息;
  4. 根据像素信息生成像素矩阵;
  5. 根据像素矩阵、宽度和高度创建图片对象ImageData
  6. 利用putImageData将图像绘制出来。

具体的代码实现为:

JavaScript

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 getBlock(pos,s,d){
var p=pos;
while(len=s[p++]){
for(var i=0;i<len;i++)
d.push(s[p+i]);
p+=len;
}
return p-pos;
}

2、使用方法,当然就是我们的((字符串.UrlEncode()
)就可以将字符串转换为utf-8编码的url参数((字符串.UrlEncodeGB2312()
)就可把字符串转换成gb2312编码的参数,很好吧,O(∩_∩)O哈哈~

DEMO演示

在线演示: DEMO 
源码请移步 Github 
图片 3 

打赏支持我写出更多好文章,谢谢!

打赏作者

//内部过程,获取一帧数据
function getSingleFrame(pos,frame){
var i=pos;
if(bytes[i]==0x21){
i+=3;
if(bytes[i]&1)
frame.transparentIndex=bytes[i+3];
frame.delay=bytes[i+1]|(bytes[i+2]<<8);
for(i+=5;i<bytes.length&&bytes[i]!=0x2c;i++);
if(i==bytes.length){
alert(“错误:找不到图像标志符”);
return 0;
}
}
frame.offsetX=bytes[i+1]|(bytes[i+2]<<8);
frame.offsetY=bytes[i+3]|(bytes[i+4]<<8);
frame.width=bytes[i+5]|(bytes[i+6]<<8);
frame.height=bytes[i+7]|(bytes[i+8]<<8);
var f=bytes[i+9];
i+=10;
if(f&0x40)
frame.interlace=true;
if(f&0x20)
frame.sorted=true;
if(f&0x80){
frame.colorResolution=(f&0x7)+1;
frame.localPalette=[];
i+=getPalette(i,bytes,frame.localPalette,1<<frame.colorResolution);
}
else{
frame.colorResolution=gif.colorResolution;
frame.localPalette=gif.globalPalette;
}
var lzwLen=bytes[i++]+1;
i+=getBlock(i,bytes,frame.data);
frame.data=decodeLzw(frame.data,lzwLen);
return frame.data?i-pos:0;
}

您可能感兴趣的文章:

  • js 编码转换 gb2312 和 utf8
    互转的2种方法
  • Javascript下的urlencode编码解码方法附decodeURIComponent
  • js对图片base64编码字符串进行解码并输出图像示例
  • js
    显示base64编码的二进制流网页图片
  • utf-8编码引起js输出中文乱码的解决办法
  • 通过javascript进行UTF-8编码的实现方法
  • JS
    文字符串转换unicode编码函数
  • JavaScript
    Base64编码和解码,实现URL参数传递。
  • JavaScript实现Base64编码转换
  • js下用gb2312编码解码实现方法
  • JS实现的哈夫曼编码示例【原始版与修改版】

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 4
图片 5

2 赞 3 收藏 1
评论

//定义存储GIF文件的数据结构
//提供方法showInfo,返回图片信息
function GIF(){
this.version=””; //版本号
this.width=0; //逻辑屏幕宽度
this.height=0; //逻辑屏幕高度
this.colorResolution=0; //颜色深度
this.sorted=false; //全局色表分类标志
this.globalPalette=null; //全局色表
this.backgroundIndex=-1; //背景色索引
this.pixelAspectRadio=0; //像素宽高比
this.frames=[]; //图像各帧,见GIF_Frame
this.showInfo=function(sep){ //显示图片信息,sep为行分隔符
if(!sep)
sep=”n”;
var s=”Gif infomation:”+sep+”——————-“;
s+=subInfo(this)+sep;
for(var i=0;i<this.frames.length;i++)
s+=sep+”frames “+i+”———-“+subInfo(this.frames[i]);
return s;
function subInfo(o){
var s=””;
for(var i in o){
if(i==”showInfo”||i==”draw”)
continue;
s+=sep+i+”:”;
if(typeof(o[i])==”object”)
s+=(o[i]?o[i].length:”null”);
else
s+=o[i];
}
return s;
}
}
}

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图