[Python+JavaScript]JS调用摄像头并拍照，上传至tornado后端并转换为PIL的Image

最新推荐文章于 2023-09-04 19:53:58 发布

weixin_30475039

最新推荐文章于 2023-09-04 19:53:58 发布

阅读量595

点赞数

CC 4.0 BY-SA版权

文章标签： python 后端前端 ViewUI

原文链接：http://www.cnblogs.com/lee-li/p/10765871.html

本文介绍了一个使用Web前端调用摄像头拍照，并将图片转换为Base64编码发送到后端进行人脸识别的程序。前端通过getUserMedia API获取摄像头视频流，利用Canvas绘制并转换图片，后端使用Tornado接收并解码Base64字符串。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近再写一个人脸识别的程序，需要从Web前端调用摄像头拍照，然后发送给后端进行识别

总体思路是：Web前端拍照 -> 图片转为Base64 -> 发送至tornado后端 -> 后端解码，转换回PIL的Image对象

前端代码

调起摄像头

function getMedia() {
          let constraints = {
              video: {width: 300, height: 300},
              audio: false
          };
          let video = document.getElementById("video"); //这里是用作实时显示摄像头图像的canvas对象
          let promise = navigator.mediaDevices.getUserMedia(constraints);
          promise.then(function (MediaStream) {
              video.srcObject = MediaStream;
              video.play();
          });
      }

拍照

function takePhoto() {
        let video = document.getElementById("video"); //用于实时显示摄像头画面的canvas
        let canvas = document.getElementById("canvas"); //用于显示拍得照片显示的canvas
        let ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, 300, 300);
        UploadFile() //拍完照片后调用上传函数
      }

上传图片

function UploadFile(){
            let canvas = document.getElementById('canvas');
            console.log(canvas.toDataURL('image/jpeg'))  //也可以是png
            jQuery.post('/Check', {
              img: canvas.toDataURL('image/jpeg') //转换为Base64
            }).done(function(rs) {
              console.log(rs);
              document.getElementById("showName").innerHTML = rs
            }).fail(function(err) {
              console.log(err);
              document.getElementById("showName").innerHTML = err
            });
        }

后端

class Check(tornado.web.RequestHandler): 
    def get(self):
        self.write('错误的访问方式!')

    def post(self, *args, **kwargs):
        base64str = self.get_argument('img') //读取post参数
        base64str = base64str.replace("data:image/jpeg;base64,","") //删除编码前的标记
        imgstr = base64.b64decode(base64str) //解码
        imgio = io.BytesIO(imgstr) 
        img = Image.open(imgio) //转换回PIL的Image对象

转载于:https://www.cnblogs.com/lee-li/p/10765871.html