maxboddy's picture
Update static/script.js
24eec09 verified
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "white";
ctx.lineWidth = 16;
ctx.lineCap = "round";
let drawing = false;
// 滑鼠事件
canvas.addEventListener("mousedown", (e) => {
drawing = true;
draw(e.clientX, e.clientY);
});
canvas.addEventListener("mouseup", () => {
drawing = false;
ctx.beginPath();
});
canvas.addEventListener("mousemove", (e) => {
if (drawing) draw(e.clientX, e.clientY);
});
// 手機觸控事件
canvas.addEventListener("touchstart", (e) => {
e.preventDefault();
drawing = true;
const touch = e.touches[0];
draw(touch.clientX, touch.clientY);
});
canvas.addEventListener("touchmove", (e) => {
e.preventDefault();
if (drawing) {
const touch = e.touches[0];
draw(touch.clientX, touch.clientY);
}
});
canvas.addEventListener("touchend", () => {
drawing = false;
ctx.beginPath();
});
// 共用繪圖函式
function draw(x, y) {
const rect = canvas.getBoundingClientRect();
ctx.lineTo(x - rect.left, y - rect.top);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x - rect.left, y - rect.top);
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.fillRect(0, 0, canvas.width, canvas.height);
document.getElementById("result").innerText = "";
}
function submit() {
const image = canvas.toDataURL();
fetch("/predict", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ image })
})
.then(res => res.json())
.then(data => {
const text = `辨識結果:${data.label}\n信心值:${(data.confidence * 100).toFixed(2)}%`;
document.getElementById("result").innerText = text;
});
}