<!DOCTYPE html>
<html>
<head>
<title>Doodle Board</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<button id="saveBtn">保存为图片</button>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var isDrawing = false;
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);
function startDrawing(e) {
isDrawing = true;
ctx.beginPath();
ctx.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
}
function draw(e) {
if (!isDrawing) return;
ctx.lineTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
ctx.stroke();
}
function stopDrawing() {
isDrawing = false;
}
document.getElementById("saveBtn").addEventListener("click", saveImage);
function saveImage() {
var image = canvas.toDataURL(); // 获取canvas的图像数据URL
// 发送图片数据到后端
fetch('your-backend-url', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ image: image }),
})
.then(response => response.json())
.then(data => {
// 在这里可以处理后端返回的响应数据
console.log(data);
})
.catch(error => {
// 处理错误
console.error('Error:', error);
});
}
</script>
</body>
</html>
savaImage()方法是发送给后端的方法,如果只是想下载图片,可以看一下代码:
function saveImage() {
var image = canvas.toDataURL(); // 获取canvas的图像数据URL
var a = document.createElement("a");
a.href = image;
a.download = "doodle.png";
a.click();
}