开发中遇到一个问题,就是java返回给我一个16进制,让我进行解密后生成图片文件,并展示出来。
java是这样处理的:
1、先读取图片信息,获取byte[]字节流
2、将对应字节流做Base64编码得到编码后的byte[]字节流
3、将做Base64编码产生的字节流转换成16进制的字符串返回给前端
另外 报文传输的是字符串,不是字节流
我们收到的字符串转换成字节流,就是Base64编码的
然后我们前端将他反过来处理即可:
1、将16进制字符串转换byte[]字节流;
2、对转换后的字节流做Base64解码;
3、将解码后的byte[]字节流生成图片
本来浏览器支持直接显示base64字符串,我们只需要直接返回二进制的base64字符串即可。但是怎么要求,我们就怎么做吧。查资料,找别人写的代码,然后最终成功了。下面附上代码。
这是后台返还给我的16进制数据,然后第一步先转成byte[],
Str2Bytes(str) {
var pos = 0;
var len = str.length;
if(len %2 != 0) {
return null;
}
len /= 2;
var hexA = new Array();
for(var i=0; i<len; i++) {
var s = str.substr(pos, 2);
var v = parseInt(s, 16);
hexA.push(v);
pos += 2;
}
return hexA;
}
然后在 将byte数组转字符串:
arrayBufferToBase64( buffer ) {
var binary = '';
var bytes = new Uint8Array( buffer );
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode( bytes[ i ] );
}
// return window.btoa( binary );
return binary;
},
注释掉的是多做了一步编码,否则图片会不显示。
最后的处理:
let s = e.data.imageData // 获取到的16进制数据
_this.Str2Bytes (s)
let str = _this.arrayBufferToBase64(_this.Str2Bytes (s));//转换字符串
let outputImg = document.createElement('img');
outputImg.src = 'data:image/png;base64,'+ str;
document.body.appendChild(outputImg);
为了尽快看到图片,先这样处理的,将就看一下吧- -
最终的图片:
结束。