Question

我正在尝试使用html和js创建一个flask应用程序。它从网络摄像头获取图像，将其存储在html canvas中，然后将canvas转换为数据url，然后通过ajax将其发送到flask。然后，我使用base64解码数据并使用cv2 imdecode读取数据。

我遇到的问题是图像的python代码根本没有执行。我的网页加载完毕，一切正常，但是当我拍照时，什么也没发生。

另一件事是，当在flask中呈现html时，JS的console.log函数不起作用，所以我不知道我的JS代码是否有问题。

能否请您查看我的html和python代码以告诉我我要去哪里错了？我确定应该不会调用应该在ajax的url上调用的python函数。

这是我发送ajax的js：

//Function called on pressing a html button
function takePic() {

  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);//video is the video element in html which is recieving live data from webcam

  var imgURL = canvas.toDataURL();
  console.log(imgURL);
  $.ajax({
    type: "POST",
    url: "http://url/take_pic", //I have doubt about this url, not sure if something specific must come before "/take_pic"
    data: imgURL,
    success: function(data) {
      if (data.success) {
        alert('Your file was successfully uploaded!');
      } else {
        alert('There was an error uploading your file!');
      }
    },
    error: function(data) {
      alert('There was an error uploading your file!');
    }
  }).done(function() {
    console.log("Sent");
  });

}

我对ajax中的url参数有疑问，我认为在此之前必须要有一些特定的条件"/take_pic"，而不仅仅是"https://url"。

这是我的蟒蛇：

from flask import Flask,render_template,request
import numpy as np
import cv2
import re
import base64

import io

app = Flask(__name__,template_folder="flask templates")

@app.route('/')
def index():
   return render_template('live webcam and capture.html')

@app.route('/take_pic',methods=["POST"])
def disp_pic():
    data = request.data
    encoded_data = data.split(',')[1]
    nparr = np.fromstring(encoded_data.decode('base64'), np.uint8)
    img = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
    cv2.imshow(img)
    cv2.waitKey(0)
    cv2.destroyAllWindows()

if __name__ == '__main__':
   app.run(debug = True)

Answer 1

我刚刚创建了新的python和html文件，并放置了类似的代码，现在它可以工作了。不知道错误的确切原因，但是两个代码相同。

无法将图像从html画布发送到Flask python

1 个答案: