CODEWITHSUNDEEP
javascriptpythonhtml
Shriniwas
Shriniwas

Reputation: 754

python as Backend and HTML as front end

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

Upvotes: 1

Views: 16393

Answers (1)

Domenik Reitzner
Domenik Reitzner

Reputation: 1613

Post 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

Upvotes: 2

Related Questions