opencv 如何从flask服务器发送图像到javascript前端显示?

bd1hkmkf  于 2022-11-15  发布在  Java
关注(0)|答案(2)|浏览(164)

我在我的flask应用程序中使用opencv(python 2.7)通过网络摄像头捕捉一张图像。我想在前端将这张图像显示给客户端,以便在鼠标单击时获得图像的坐标。我如何编写函数分别通过flask和javascript发送和接收图像?
flask服务器代码:

from flask import Flask,render_template
import cv2

app = Flask(__name__)

@app.route('/')
def capture_image(self):
    self.cam = cv2.VideoCapture(0)
    self.img = self.cam.read()
    self.cam.release()
    render_template(index.html,ob=self.img)

@app.route('/index')
#display image in html

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

JavaScript代码:

<html>
<head>
<title> image </title>
</head>
<body>
<img src = "{{ url_for('imagefield') }}">
</body>
</html>
sbdsn5lh

sbdsn5lh1#

我的建议是使用imwrite将图片保存在“static/filename.jpg”中。然后发送URL而不是实际的图片,并让正在使用该图片文件的div重新加载它。我已经发送了整个图片,当我在POSTMAN上检查时,它花了大约10秒来加载,但是,它在浏览器中根本没有加载。如果你坚持发送文件,请参见flask return image created from database
我在做这样的事情:

flask:
return jsonify({'image_url': imgPath})

part of ajax request:
success: function (data) {
      console.log(data);
      $('#myimg').html('<img class="img-responsive"  src="'+data.image_url+'"/>');
    }

希望这对你有帮助。

jckbn6z7

jckbn6z72#

我花了太多的时间试图弄清楚这个问题。对不起,已经晚了6年了。你需要在 flask 端读取你的图像,将它编码为base64,然后将它解码为utf。从这里,它将是json可序列化的,这样你的javascript就可以使用jquery. AJAX ()将它拉进来。
蟒面

@app.route("/getimage", methods=["GET", "POST"])
def getimage():
    if os.path.isfile("path-to-file.png"):
        import base64
        with open("path-to-file.png", "rb") as img_file:
            my_string = base64.b64encode(img_file.read()).decode("utf-8")
        return json.dumps({"success": 1, "image":my_string})

    else:
        return json.dumps({"success":0})

javascript端

jQuery.ajax({
        url: "/getimage",
        type: "GET",
        success: function(returned_data){
            returned_data = JSON.parse(returned_data)
            if (returned_data['success'] > 0){ // generation is done
                const byteCharacters = atob(returned_data['image']);
                const byteNumbers = new Array(byteCharacters.length);
                for (let i = 0; i < byteCharacters.length; i++) {
                    byteNumbers[i] = byteCharacters.charCodeAt(i);
                }
                const byteArray = new Uint8Array(byteNumbers);
                document.getElementById("image-result").src = URL.createObjectURL(new Blob([byteArray], { type: 'image/png' }));
            }
            else{
                console.log("could not find image");
            }
        }
    });

相关问题