使用canvas画画生成图片发送到后端

最新推荐文章于 2024-04-03 01:13:12 发布

封洪福

最新推荐文章于 2024-04-03 01:13:12 发布

阅读量737

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_44496691/article/details/132303721

版权

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