Django将网络摄像头的图片流上传到前端进行显示--ajax+图转base64转图

本文讲的是如何将后台从外部获得的图片编码成base64码发送给js再上传到html进行显示！

这个功能在上学期电赛做自动停车系统的时候研究过，但由于当时时间比较紧迫，再加上临时改方案，之后便再没有深究过，直到这几天在做一个嵌入式作业，想通过esp32-cam作为网络摄像头，利用opencv获取图片流将图片流上传到前端进行显示才又翻开这个尘封已久的问题。
查了好多资料，大多方法就是：获得图片----图片编码----转换成json格式----上传给js
但我尝试了好多次，改了好多个版本，都没能传输成功，总是卡在base64解码或者译码这一步骤。
冥思苦想了好久，想出了以下方法，希望能对路过的朋友有所帮助：

1. 首先是获取图片，这个步骤每个人都不一样，只要能获取一张正常的图片就行。
2. 接下来我将图片保存在一个文件夹里：cv2.imwrite(imgpath, img)
3. 然后再以二进制读取图片进行编码成base64形式

with open(imgpath, 'rb') as f:  # 以二进制读取图片
    data = f.read()
    encode_str = base64.b64encode(data)

• 为什么还要先保存下来再编码呢？
  我试过，直接报错，因为图片不是二进制形式的

接下来便是跟网上其他方案不一样的一步了

return HttpResponse(encode_str)

直接返回base64码

---

再来到js部分
利用定时器，让ajax每100毫秒访问一次刚刚那个函数，这样就可以每一百毫秒改变一次显示在前端的图片啦，也就是视频的原理，dddd
而ajax要做的事情如下：

$.ajax({
     
   	type: 'GET',
    url: 'http://192.168.0.116:9000/App/show/',
    data: {
     
        'data': 'ok',
    },
    success:function(dates) {
     
        $('#pic').attr("src", "data:image/png; base64," + dates);
    }
});

success:function(dates)当访问函数成功返回后获取返回值，也就是我们前面HttpResponse的base64值。

$('#pic').attr("src", "data:image/png; base64," + dates);

这一句则是将base64码译码成图片再显示到前端这个地方。
自此，功能成功实现

---

知识浅薄，有什么不对的还望评论或私信指正！！