Question

我正在使用HTML和Python构建一个简单的Web应用程序来在画布上显示图像。我也在使用Flask框架。 Image从HTML上传并在Opencv（Python）中处理，然后在HTML制作的画布上显示，到目前为止我所做的只是上传图像。但我无法在画布上显示。

这里是CSS和HTML代码

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>

和Python代码

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)

请告诉我我失踪了什么，错了！感谢

Answer 1

使用FileReader API（readAsDataURL）发布您的图片。

将您的图像写入file with python（谨防base64编码）

然后返回Json with Flask（错误或成功）

根据服务器的结果显示图像或错误消息。

我希望这是足够的信息。快乐的编码

python作为后端，HTML作为前端

1 个答案: