I am building a simple web application using HTML and Python to display image on canvas. Also I am using Flask framework for it. Where Image is uploaded from HTML and processed it in Opencv(Python) and then displayed on HTML made canvas, what I have done so far is uploaded image only. But I couldn't displayed on canvas.
here is the CSS and HTML code
p {
font-family: verdana;
font-size: 20px;
}
h2 {
margin-left: 20px;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="static/test.css">
<title>
CV - Rogier
</title>
</head>
<body>
<h3>
Study
</h3>
<p>
<form action="/hello" method="post">
Asset Tag:<br>
<input type = "file" id = "Image">
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("Image");
x.disabled = true;
}
</script>
<input type="submit" value="Submit">
</form>
</p>
<canvas id="myCanvas" width="640" height="400" style="border:1px solid #000000;">
</canvas>
<script>
var n = document.getElementById("Image")
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText(n, 10, 50);
</script>
</body>
</html>I am building a simple web application using HTML and Python to display image on canvas. Also I am using Flask framework for it. Where Image is uploaded from HTML and processed it in Opencv(Python) and then displayed on HTML made canvas, what I have done so far is uploaded image only. But I couldn't displayed on canvas.
here is the CSS and HTML code
p {
font-family: verdana;
font-size: 20px;
}
h2 {
margin-left: 20px;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="static/test.css">
<title>
CV - Rogier
</title>
</head>
<body>
<h3>
Study
</h3>
<p>
<form action="/hello" method="post">
Asset Tag:<br>
<input type = "file" id = "Image">
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("Image");
x.disabled = true;
}
</script>
<input type="submit" value="Submit">
</form>
</p>
<canvas id="myCanvas" width="640" height="400" style="border:1px solid #000000;">
</canvas>
<script>
var n = document.getElementById("Image")
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText(n, 10, 50);
</script>
</body>
</html>And Python code
from flask import Flask, render_template, request
import cv2
app = Flask(__name__)
@app.route('/')
def index():
return render_template('test.html')
@app.route('/hello', methods=['GET','POST'])
def hello():
if request.method == 'POST':
image = request.form['Image']
get_image = cv2.imread(image,0)
return cv2.imshow(get_image)
else:
return render_template('test.html')
if __name__ == '__main__':
app.run(host = 'localhost', port = 3000, debug=True)
please tell me what I am missing and whats wrong!! Thanks
Share Improve this question asked May 22, 2018 at 10:13 ShriniwasShriniwas 7544 gold badges13 silver badges31 bronze badges 7- Do you want to safe the image on the server? If not you don't have to use a submit, just load the image with js and display it. Look here – Domenik Reitzner Commented May 22, 2018 at 10:42
- @DomenikReitzner Actually after I upload an Image, I want to process it and save it on server. – Shriniwas Commented May 22, 2018 at 10:59
- ok, and then you want to display it if it was saved correctly? – Domenik Reitzner Commented May 22, 2018 at 11:54
- @DomenikReitzner yeah!! – Shriniwas Commented May 22, 2018 at 12:10
- So I would implement the safe functionality first (send the file with post) and then display the image if you get a "success message" – Domenik Reitzner Commented May 22, 2018 at 12:14
1 Answer
Reset to default 2Post your image with FileReader API (readAsDataURL).
Write your image into a file with python (beware of base64 encoding)
Then return a Json with Flask (either error or success)
Display image or error message depending on result from server.
I hope this is enough information. Happy coding