- 我有一個可以畫圖的界面。
- 我有一個可以識別此影像的機器學習模型。
我想要的是？單擊“識別”按鈕后，我想將機器學習模型的輸出發送到外部介面，即文本欄位而不重繪 頁面。
- 在按下“識別”按鈕之前
- 按下“識別”按鈕后
使用下面的代碼，我可以將模型的輸出列印到終端，但我需要將其發送到文本欄位。
油漆.html
<html>
<head>
<meta charset="utf-8">
<title>Drawing App</title>
<link rel="stylesheet" href="static/style.css" type="text/css" media="screen" title="no title">
<link href='https://fonts.googleapis.com/css?family=Open Sans:300' rel='stylesheet' type='text/css'>
</head>
<body>
<h2>Phone Number Recognition<img src="https://cdn1.iconfinder.com/data/icons/fatcow/32/painbrush.png" alt="" class="paint"></h2>
<canvas width="1024" height="256" id="mainCanvas"></canvas>
<div class="controls">
<button id="clear" onclick='clear_canvas()'>Clear</button>
<button id="recognize" onclick='recognize_number()'>Recognize</button>
<label id="label1"></label>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="static/main.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
樣式.css
* {
margin: 0;
padding: 0;
}
body {
background: #F5F5F5;
font-family: sans-serif;
height: 100%;
width: 100%;
}
h2 {
text-align: center;
margin: 20px;
font-family: 'Open Sans', sans-serif;
}
.paint {
padding-top: 2px;
}
/* CANVAS STYLING
===================*/
canvas {
display: block;
margin: 40px auto 10px;
border-radius: 5px;
border-left: 1px solid #E0E0E0;
border-right: 1px solid #E0E0E0;
border-top: 1px solid #E0E0E0;
box-shadow: 0 4px 0 0 #E0E0E0;
cursor: url(../img/cursor.png), crosshair;
}
.controls {
min-height: 60px;
margin: 0 auto;
width: 600px;
border-radius: 5px;
overflow: hidden;
}
ul {
list-style:none;
margin: 0;
float: left;
padding: 10px 0 20px;
width: 100%;
text-align: center;
}
/* BUTTON STYLES
==============*/
button {
background: #68B25B;
box-shadow: 0 3px 0 0 #6A845F;
color: #fff;
outline: none;
cursor: pointer;
text-shadow: 0 1px #6A845F;
display: block;
font-size: 16px;
line-height: 40px;
}
label {
background: #c7ebc1;
box-shadow: 0 3px 0 0 #6A845F;
color: rgb(0, 0, 0);
outline: none;
cursor: pointer;
text-shadow: 0 1px #6A845F;
display: block;
font-size: 16px;
line-height: 40px;
}
#clear {
border: none;
border-radius: 5px;
margin: 10px auto;
padding: 0 20px;
width: 160px;
height: 40px;
}
#recognize {
border: none;
border-radius: 5px;
margin: 10px auto;
padding: 0 20px;
width: 160px;
height: 40px;
}
#label1 {
border: none;
border-radius: 5px;
margin: 10px auto;
padding: 0 20px;
width: 260px;
height: 40px;
}
main.js
var colour = $(".selected").css("background-color");
var $canvas = $("canvas");
var context = $canvas[0].getContext("2d");
var lastEvent;
var mouseDown = false;
context.fillStyle = "white";
context.fillRect(0, 0, $canvas[0].width, $canvas[0].height);
// On mouse events on the canvas
$canvas.mousedown(function (e) {
lastEvent = e;
mouseDown = true;
}).mousemove(function (e) {
// Draw lines
if (mouseDown) {
context.beginPath();
context.moveTo(lastEvent.offsetX, lastEvent.offsetY);
context.lineTo(e.offsetX, e.offsetY);
context.strokeStyle = colour;
context.lineWidth = 10;
context.lineCap = 'round';
context.stroke();
lastEvent = e;
}
}).mouseup(function () {
mouseDown = false;
}).mouseleave(function () {
$canvas.mouseup();
});
// Clear the canvas when button is clicked
function clear_canvas() {
context.fillStyle = "white";
context.fillRect(0, 0, $canvas[0].width, $canvas[0].height);
}
function recognize_number() {
var imgURL = $canvas[0].toDataURL('image/jpg');
$.ajax({
type: "POST",
url: "http://172.28.104.162:8080/hook",
data:{
imageBase64: imgURL
}
}).done(function() {
console.log('sent');
});
}
燒瓶
from flask import Flask, render_template, request
import os
import base64
import re
SAVE_PATH = '../data_from_flask'
app = Flask(__name__)
def some_model(img_path):
return 'some_output'
@app.route("/")
def home():
return render_template("paint.html")
@app.route('/hook', methods=['GET', 'POST'])
def recognize_image():
image_b64 = request.values['imageBase64']
image_data = re.sub('^data:image/. ;base64,', '', image_b64)
image_path = f"{SAVE_PATH}/flask_{len(os.listdir(SAVE_PATH))}.jpg"
with open(image_path, "wb") as fh:
fh.write(base64.decodebytes(bytes(image_data, encoding='UTF-8')))
recognized_number = some_model(img_path=image_path)
print(recognized_number)
return render_template('paint.html')
if __name__ == "__main__":
app.run(host='0.0.0.0', port='8080', debug=False)
uj5u.com熱心網友回復：
您可以通過它獲取您的元素id并將文本設定為您的計算輸出。
const labelElement = document.getElementById('label1');
function recognize_number() {
var imgURL = $canvas[0].toDataURL('image/jpg');
$.ajax({
type: "POST",
url: "http://172.28.104.162:8080/hook",
data:{
imageBase64: imgURL
}
}).done(function(output) {
labelElement.innerText = output;
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/435981.html
標籤：javascript html css 烧瓶 帆布
上一篇：使用正則運算式從URL中提取資訊