先来说一下我这次的业务需求,我们这次的项目是: 用户在浏览器的画板上绘图,然后在鼠标松开的时候,前端需要记录用户的笔迹,即保存用户画好的图,传给后端,然后后端将数据解码,传递给机器学习模型,机器学习模型根据图片找出最匹配用户图片的图片,反馈索引给用户
因为机器学习模型的输入只要求是黑白图,因此前端传值可以传一个比特流过来(将0视为白色,1视为黑色),后端再根据比特流构图即可
现在需要解决以下问题- 如何将01字符串转为比特流(本质上是把8个比特位转为一个char型变量)
- 比特流如何进行base64编码
首先来看看我们为什么要用base64编码:
https://www.zhihu.com/question/36306744/answer/71626823
现在看看js中Assic码和字符如何互相转化:
得到字符的Assic码:
"A".charCodeAt(); "a".charCodeAt();
将Assic转为字符
String.fromCharCode(97);// 'a' String.fromCharCode(100);// 'd'8个比特位转为一个char
考虑一个输入为长度为8,只含0/1的字符串转化为char类型
bitsTransToChar:function(bits){
var res=0
for(var i=0;i
将一个01字符串先转化为含若干字符的字符串,再将字符串通过base64编码
strbase64Encode:function(str){
var temp=""
var res=[]
for(var i=0;i
最终将原本4X299X299=357604的数据压缩为:
14904字节!
Python端如何解码数据呢?
def get_trans(buffer):
buffer=base64.b64decode(buffer)
global input_image
for i in range(pic_height):
for j in range(pic_width):
temp=i * pic_width + j
if (buffer[(temp//8)]>>(7-temp%8))&1 == 1:
input_image.putpixel((i,j),(0,0,0))
else:
input_image.putpixel((i,j),(255,255,255))
因为buffer数组中的每一个数字的每一位代表一个比特的数据,故采用移位运算取出每一个比特位。
最终效果
前端绘制:
后端接收:
而且速度还嘎嘎快!(●’◡’●)
