[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對象