|
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; |
|
}); |
|
} |
|
|