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

How to send an image from flask server to javascript display on frontend?

本文关键字：前端 javascript 显示 图像 flask 服务器      更新时间：2023-09-26

我在我的flask应用程序中使用opencv(python 2.7)通过网络摄像头捕获图像。我想在前端向客户端显示此图像，以获得鼠标点击图像的坐标。我怎么写函数来发送和接收图像通过flask和javascript分别。

flask server code:

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>

我的建议是使用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+'"/>');
    }

我花了很多时间才弄明白。抱歉，太晚了6年。您需要读取flask侧的图像，将其编码为base64，然后将其解码为utf。从这里开始，它将是json序列化的，这样你的javascript就可以使用jquery.ajax()把它拉进来。

Python的一面

@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");
            }
        }
    });

相关文章：