107 lines
3.1 KiB
HTML
107 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>绘图应用</title>
|
|
<style>
|
|
#canvas, #canvas2 {
|
|
background-color: black;
|
|
cursor: crosshair;
|
|
}
|
|
|
|
#result {
|
|
margin-top: 10px;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas" width="400" height="400"></canvas>
|
|
<button onclick="submitDrawing()">提交</button>
|
|
<button onclick="clearCanvas()">清除</button>
|
|
<div>结果: <span id="result"></span></div>
|
|
|
|
<script>
|
|
const canvas = document.getElementById("canvas");
|
|
const context = canvas.getContext("2d");
|
|
|
|
let isDrawing = false;
|
|
|
|
canvas.addEventListener("mousedown", startDrawing);
|
|
canvas.addEventListener("mousemove", draw);
|
|
canvas.addEventListener("mouseup", stopDrawing);
|
|
canvas.addEventListener("mouseout", stopDrawing);
|
|
|
|
function startDrawing(e) {
|
|
isDrawing = true;
|
|
draw(e);
|
|
}
|
|
|
|
function draw(e) {
|
|
if (!isDrawing) return;
|
|
|
|
const rect = canvas.getBoundingClientRect();
|
|
const mouseX = e.clientX - rect.left;
|
|
const mouseY = e.clientY - rect.top;
|
|
|
|
context.lineWidth = 50;
|
|
context.lineCap = "round";
|
|
context.strokeStyle = "white";
|
|
|
|
context.lineTo(mouseX, mouseY);
|
|
context.stroke();
|
|
context.beginPath();
|
|
context.moveTo(mouseX, mouseY);
|
|
}
|
|
|
|
function stopDrawing() {
|
|
isDrawing = false;
|
|
context.beginPath();
|
|
}
|
|
|
|
function submitDrawing() {
|
|
const imageDataUrl = canvas.toDataURL("image/png");
|
|
|
|
const image = new Image();
|
|
image.src = imageDataUrl;
|
|
|
|
image.onload = function() {
|
|
const tempCanvas = document.createElement("canvas");
|
|
const tempContext = tempCanvas.getContext("2d");
|
|
tempCanvas.width = 28;
|
|
tempCanvas.height = 28;
|
|
tempContext.drawImage(image, 0, 0, 28, 28);
|
|
|
|
const croppedImageDataUrl = tempCanvas.toDataURL("image/png");
|
|
|
|
submitToAPI(croppedImageDataUrl);
|
|
};
|
|
}
|
|
|
|
function clearCanvas() {
|
|
// 清除Canvas上的绘图
|
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
|
|
function submitToAPI(imageDataUrl) {
|
|
fetch('/api/predict', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ image: imageDataUrl }),
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
console.log('API返回的结果:', data.result);
|
|
document.querySelector("#result").innerText = data.result.toString();
|
|
})
|
|
.catch(error => {
|
|
console.error('提交失败', error);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|