记一次Base64编码的应用

Base64编码

---

先来说一下我这次的业务需求,我们这次的项目是: 用户在浏览器的画板上绘图,然后在鼠标松开的时候,前端需要记录用户的笔迹,即保存用户画好的图,传给后端,然后后端将数据解码,传递给机器学习模型,机器学习模型根据图片找出最匹配用户图片的图片,反馈索引给用户

因为机器学习模型的输入只要求是黑白图,因此前端传值可以传一个比特流过来(将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){
           /*01字符串转成一个字符*/
          var res=0
          for(var i=0;i<bits.length;i++){                            
               res=res*2;
               es+=bits.charAt(i)=='1';
         }
         return String.fromCharCode(res);;
 }

将一个01字符串先转化为含若干字符的字符串,再将字符串通过Base64编码

  strBase64Encode:function(str){
 /* 将一个01字符串先转化为含若干字符的字符串,再将字符串通过Base64编码*/
 var temp=""
 var res=[]
for(var i=0;i<str.length;i+=8){
temp=str.substr(i,Math.min(8,str.length-i));
 while(temp.length!=8) temp+="0"                        res.push(this.bitsTransToChar(temp))
}
return window.btoa(res.join(""))
}

最终将原本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数组中的每一个数字的每一位代表一个比特的数据,故采用移位运算取出每一个比特位。

---

最终效果

前端绘制:

后端接收:

而且速度还嘎嘎快!(●’◡’●)