jpeg⼆进制数据转base64后在前端显⽰
需求：前端从后端获取图⽚。
背景：后端数据均保存在硬盘⾥，从硬盘取出后的Jpeg图⽚，⼆进制数据传输给前端显⽰图⽚
直接⼆进制传输，中间层需要兼容，想着直接转base64字符串，js刚好可以直接显⽰图⽚
Bse64是⼀种以64个可打印字符对⼆进制数据进⾏编码的编码算法。base64在对数据进⾏编码时以三个8位字符型数据为⼀组，取这三个字符型数据的ASCII码，然后以6位为⼀组组成4个新的数据，这4个新的数据有6位，所以它的最⼤值为2^6=64。我们以4个6位数据的⼗进制数从base64表中得到最终编码后的字符。
Base64 编码表
Value Char Value Char Value Char Value Char
0A16Q32g48w
1B17R33h49x
2C18S34i50y
3D19T35j51z
4E20U36k520
5F21V37l531
6G22W38m542
7H23X39n553
8I24Y40o564
9J25Z41p575
10K26a42q586
11L27b43r597
12M28c44s608
13N29d45t619
14O30e46u62+
15P31f47v63/
由于base64编码是将编码前的3*8位数据，分解成4个6位的数据，所以经过base64编码后的字符串长度是4的倍数。但往往我们进⾏编码的数据长度并不是3的倍数，这就造成了“编码”后的位数不为4的倍数，⽐如Brisk共5×8=40位，以6位为⼀组可以分为7组，这样“编码”后就有7个字符，但base64编码后的字符长度应该是4的倍数，显然这⾥就出问题了，那么怎么办呢？前⾯的不可以抛弃掉，所以就只有“追加”了，所以Brisk经过base64编码后的长度应该是8个字符，⽽第8个编码后的字符是'='，再⽐如对单个字符a进⾏base64编码，由于它的长度不是3的倍数，以3个字节为⼀组它只能分⼀组，再以6位为⼀位它只能分两组，所以经过“编码”后它的长度是2，但base64编码后的个数应该是4的倍数，所以它的长度应该是4，所以在后⾯补上两个‘=’，由于⼀个数求余3后有三个不同的结果，0、1、2，所以在对⼀个数据进⾏base64进⾏编码后它的长度为：
（1）当进⾏编码的数据长度是3的倍数时，len=strlen(str_in)/3*4;
（2）当进⾏编码的数据长度不是3的倍数时，len=(strlen(str_in)/3+1)*4;
我们以Brisk这个例⼦来说明⼀下base64编码的过程。⾸先我们以3个字符为⼀组将Brisk进⾏分组，Brisk被氛围两组：Bri 和 sk；然后我们取出这两个分组中每个字节的ASCII码，B:66 r:114 i:105 s:115 k:107。它们对应的⼆进制数为  B:01000010 r:01110010
i:01101001 s:01110011 k:01101011；
第⼀组，我们以6位为⼀组对每⼀个3字节分组进⾏再分组就变成了010000 100111 001001 101001。所对应的⼗进制数是16 39 9 41，对应base64表中的结果是 Q n J p；
第⼆组，011100 110110 101100(不够补0)，所以对应的⼗进制数是 28 54 44，对应base64表中的结果是 c 2 s，最终结果为QnJpc2s=（因为第⼆组“编码”后只有三个字节）。
解码的过程是⼀个逆过程，我们将经过编码后的字符按4个字符为⼀组，然后对照base64表得到相应的⼗进制数，再将其通过拆分和组合，组成3个8位数据，这个数据就是解码后的数据，下⾯给⼀个c语⾔实现编码和解码的代码。
//need ms_free
char *base64_encode(char *str, int str_len)
{
long len;
char *res = NULL;
int i = 0,j = 0;
//定义base64编码表
char *base64_table = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
//计算经过base64编码后的字符串长度
if(str_len % 3 == 0)
len = str_len/3*4;
else
len = (str_len/3+1)*4;
res = ms_malloc(len+1);
res[len] = '\0';
//以3个8位字符为⼀组进⾏编码
for(i = 0,j = 0; i < len-2; j += 3,i += 4)
在线二进制转换{
res[i]  = base64_table[str[j]>>2];      //取出第⼀个字符的前6位并出对应的结果字符
res[i+1] = base64_table[(str[j]&0x3)<<4 | (str[j+1]>>4)];  //将第⼀个字符的后位与第⼆个字符的前4位进⾏组合并到对应的结果字符
res[i+2] = base64_table[(str[j+1]&0xf)<<2 | (str[j+2]>>6)]; //将第⼆个字符的后4位与第三个字符的前2位组合并出对应的结果字符
res[i+3] = base64_table[str[j+2]&0x3f];      //取出第三个字符的后6位并出结果字符
}
switch(str_len % 3)
{
case 1:
res[i-2] = '=';
res[i-1] = '=';
break;
case 2:
res[i-1] = '=';
break;
}
return res;
}
unsigned char *base64_decode(char *code)
{
//根据base64表，以字符到对应的⼗进制数据
int table[]={0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,62,0,0,0,
0,0,0,0,0,0,0,62,0,0,0,
63,52,53,54,55,56,57,58,
59,60,61,0,0,0,0,0,0,0,0,
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,0,0,0,0,0,0,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
};
long len;
long str_len;
unsigned char *res;
int i,j;
//计算解码后的字符串长度
len = strlen(code);
//判断编码后的字符串后是否有=
if (strstr(code,"=="))
str_len = len/4*3-2;
else if (strstr(code,"="))
str_len = len/4*3-1;
else
str_len = len/4*3;
res = ms_malloc(str_len+1);
res[str_len] = '\0';
//以4个字符为⼀位进⾏解码
for (i = 0,j = 0; i < len-2; j += 3,i += 4)
{
res[j]  = ((unsigned char)table[code[i]])<<2 | (((unsigned char)table[code[i+1]])>>4);  //取出第⼀个字符对应base64表的⼗进制数的前6位与第⼆个字符对应bas        res[j+1] = (((unsigned char)table[code[i+1]])<<4) | (((unsigned char)table[code[i+2]])>>2); //取出第⼆个字符对应base64表的⼗进制数的后4位与第三个字符对应        res[j+2] = (((unsigned char)table[code[i+2]])<<6) | ((unsigned char)table[code[i+3]]);  //取出第三个字符对应base64表的⼗进制数的后2位与第4个字符进⾏组合    }
return res;
}
<div class="subContent">
<div id="bigImage">
</div>
</div>
function showImage(oImage)
{
var HTML = "";
HTML += "<img src='data:image/jpeg;base64,"+oImage+"' width='455px' height='260px'";
HTML += "/>"
$("#bigImage").html(HTML);
}
function getBigImageBySdk()
{
var str = "action=get.anpr.big_image";
g_sUserPass = CheckUserPass();
$.ajax({
url:"/i",
type:"get",
data:str,
dataType:"text",
async:false,
timeout:1000,
beforeSend: function (xhr) {
xhr.setRequestHeader ("Authorization", "Basic "+g_sUserPass);
},
statusCode: {401: function() {
top.location.href = "/html/home.html";
}
},
success:function(sString){
showImage(sString);
//$("#images").attr("src","data:image/gif;base64,"+sString);
}
});
}
在线⼯具：
1可以在线把图⽚转换成base 64
2可以把base64数据转换成图⽚
吐槽⼀下，2的图⽚转base64功能有异常，转换后⽣成不了图⽚，因此⽤1的⼯具转换base64，⽤2去⽣成图⽚

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。