[Python+JavaScript]JS調用攝像頭並拍照，上傳至tornado后端並轉換為PIL的Image

最近再寫一個人臉識別的程序，需要從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對象