如何将图像从烧瓶服务器发送到前端的 javascript 显示？答案

【问题标题】：How to send an image from flask server to javascript display on frontend?如何将图像从烧瓶服务器发送到前端的 javascript 显示？
【发布时间】：2016-06-25 15:57:17
【问题描述】：

我在我的烧瓶应用程序中使用 opencv(python 2.7) 通过网络摄像头捕获图像。我想将此图像显示给前端的客户端以获取鼠标单击时图像的坐标。如何编写发送和发送的函数分别通过flask和javascript接收图像。

烧瓶服务器代码：

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>

【问题讨论】：

标签： javascript opencv canvas flask

【解决方案1】：

我的建议是在“static/filename.jpg”中使用 imwrite 保存图像。然后发送 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+'"/>');
    }

希望这会有所帮助。

【讨论】：