0

I am capturing an image through webcam using opencv(python 2.7) in my flask application.I want to display this image to the client in the frontend to get coordinates of image on mouseclick.How can i write the functions to send and receive the image via flask and javascript respectively.

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 code:

<html>
<head>
<title> image </title>
</head>
<body>
<img src = "{{ url_for('imagefield') }}">
</body>
</html>
Aishwarya Bhave
  • 9
  • 1
  • 6

1 Answers1

4

My suggestion is to save the image using imwrite in "static/filename.jpg". Then send the URL rather than the actual image and have your div that is using the image file reload it. I have sent the whole image and it took around 10 second to load when I check on POSTMAN, however, it did not laod at all in the browser. If you insist on sending the file, please see flask return image created from database

I'm doing something like this:

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+'"/>');
    }

Hope this helps.

Community
  • 1
  • 1
matchifang
  • 4,430
  • 11
  • 41
  • 67