JavaScript实现Base64编码转换

简介

Base64表示基于64个可打印字符的二进制数据。因为2的6次幂等于64，所以每6位是对应于某个可打印字符的单位。三个字节有24位，对应四个Base64单位，即三个字节需要用四个可打印字符表示。它可以用作电子邮件的传输代码。Base64中的可打印字符包括字母a-z、A-Z和数字0-9，因此总共有62个字符。此外，其他两个可打印符号在不同的系统中是不同的，通常是和/。

转换原理

Base64的直接数据源是二进制序列。当然，您也可以将图片、文本、音频和视频转换为二进制序列，然后将其转换为Base64编码。我们在这里讨论的是如何将二进制转换为Base64编码。请期待如何将图片、文本、音频和视频转换为二进制序列。

转换前，定义一个索引表，指定如何转换：

转换时，我们首先对二进制序列进行分组，每六位进行一次分组。但是如果编码的字节数不能被3整除，那么最后会多一两个字节，可以用下面的方法来处理：首先用0字节的值在最后补上，使其能被3整除，然后进行base64编码。在编码的base64文本后添加一个或两个“=”符号，以表示要补充的字节数。也就是说，当最后一个二进制八位数(一个字节)剩余时，最后一个6位base64字节块的四位为0值，最后附加两个等号；如果剩余最后两个八位字节(2个字节)，则最后6位基本字节块的两位为0值，最后附加一个等号。请参考下表：

用JavaScript实现Base64。

一旦理解了原理，就很容易实现。

定义(函数(必需，导出，模块){ var code=' abcdefghijklmnopqrstuvwxyz 0123456789/' .拆分("");//索引表/* * * @作者[电子邮件保护]* @描述将二进制序列转换为Base64编码* @ param { String } * @ return { String } */function binToBase64(BitString){ var result=' '；var tail=BitString。长度% 6；var BitStringTemp 1=BitString。substr(0，BitString。长度-尾部)；var BitStringTemp2=BitString。substr(BitString。长度-尾部，尾部)；for(var I=0；I BitStringTemp 1 . LengIti=6){ var index=ParSeint(BitStringTemp 1。substr(I，6)，2)；结果=代码[索引];} bitStringTemp2=新数组(7尾)。联接(' 0 ');if(tail){ result=code[ParSeint(BitStringTemp 2，2)]；结果=新数组((6尾)/2 1)。join('=')；}返回结果；}/* * * @作者[电子邮件保护]* @描述将base64编码转换为二进制序列* @ param { String } * @ return { String } */function base64 Tobin(str){ var BitString=' '；var tail=0；for(var I=0；我字符串长度；i ) { if (str[i]！='='){ var decode=code。(字符串[1])的索引.toString(2)；bitString=(新数组(7 - decode.length)).联接(' 0 ')解码；} else { tail} }返回bitString.substr(0，bitString。长度-尾部* 2)；}/* * * @作者[电子邮件保护]* @描述将字符转换为二进制序列* @ param { String } str * @ return { String } */function StringTobin(str){ var result=' '；for(var I=0；我字符串长度；I){ var charCode=str。charcodeat(一).toString(2)；结果=(新数组(9 -字符代码。长度)。join(' 0 ')charCode)；}返回结果；}/* * * @作者[电子邮件保护]* @描述将二进制序列转换为字符串* @ param { String } Bin */function BinToStr(Bin){ var result=' '；for(var I=0；长度；I=8){结果=字符串。fromcharcode(parseInt(bin。substr(I，8)，2))；}返回结果；}出口。base64=function(str){ return binToBase64(StringTobin(str))；}出口。decade base 64=function(str){ return BinToStr(base64 Tobin(str))；}})将图片数据进行Base64编码

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

函数getCanvas(w，h){ var c=document。create element(' canvas ')；宽度=w；高度=h；返回c .}函数getPixels(img){ var c=getCanvas(img。宽度。高度)；var CTX=c . GetContext(' 2d ')；ctx.drawImage(img，0，0)；返回ctx.getImageData(0，0，c.width，c . height)；}取到图片的二进制数据后，接下来就要进行编码了。因为图片不仅包含像素信息，还包含长度，宽度信息。所以在编码像素信息的同时也应将宽度和高度信息按某一约定进行编码，我是这样处理的：

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

具体实现为：

函数img2b基本64(img){ var img data=GetPixels(img)} .数据；var imgWidth=getPixels(img).宽度；var imgHeight=getPixels(img).身高；var bin=for(var I=0；i imgData.lengthI){ bin=base。NumToString(IMgdata[I])；} bin=bin基数。stringtobin(' $ $ ' imgWidth '，' IMgheight ' $ ')；返回基地。bin to base 64(bin)；}将图片Base64数据进行解码

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

吴惠玲（音同"白俄"音同"白俄"音同"白俄"音同"白俄"音同"白俄"音同"白俄"音同"白俄"音同"白俄"音同"白俄"音同)64号基地范仲淹的儿子，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不；-你好-你好，范仲淹，范仲淹；不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼哼；不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不，不；你是谁你好是维权者维权者维权者维权者维权者维权者维权者维权者维权者维权者维权者维权者维权者维权者维权者维权者维权者维权者维权者维权者维权者维权者维权者维权者维权者维权者维权者ImageData(映像数据):哎哎哎莆田田我的天啊。

云娥与云娥同在：

函数绘制(img数据){ var canvas=document。getelement byid(' myanvas ')；var CTX=画布。获取上下文(' 2d ')；CTX。填充矩形(0.0、imgData.width、img数据。高度)；ctx.putImageData(imgData，0.0)；}函数base642img(数据){ var str=base .BinToStr(base.base64ToBin(日期));可变img宽度=字符串。匹配(/\ $(\ d)、(\ d)\ $ $ $ $/')[1]；可变img高度=str。match(/\ $(\ d)、(\ d)\ $ $ $ $/')[2]img data=base。base64 Tobin(数据)变量。替换(基地。字符串Tobin($ $ ' img宽度'，' img高度' $ ')；var imagedata array=new uint 8 clapped array(img宽度* img高度* 4)；for(var I=0)；imagedataarray。length(I){ imagedata array[I]=parse int(img数据。substr(I * 8，8)，2)；}返回新的图像数据(imagedataarray、imgWidth、IMG height)；}