主页 / coding / 问题 / 76925959
Accepted
Stefan
Asked: 2023-08-18 09:37:25 +0800 CST

单击 html canvas 元素后如何发送到 node.js 数据库？

  • 772

我有一个 .ejs 文件并添加了一个画布。当我点击名为circle的html画布元素时，如何将值发送到nodejs？是否应该有一个与 fetch 一起使用的 POST 方法？

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

          

<canvas id ="canvas" style="border: solid 5px blue";></canvas>

<script>

    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    canvas.width = 1000;
    canvas.height = 800;

var circle = new Path2D();
circle.arc(250, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = "gray";
circle.closePath
ctx.fill(circle);

canvas.addEventListener('click', (event) => {

var circle_1 = ctx.isPointInPath(circle, event.offsetX, event.offsetY)

if (circle_1) {
//I want to send values from here
}

})
</script>

</body>
</html>
node.js

1 个回答

  1. Best Answer

    从 html 到后端交换数据的唯一方法是使用以下 02 种方法

    由于您的事件不是从通用表单引发的，因此您需要 ajax。所以在你的“onclick”事件中放这样的东西：

    无需外部库

    var xmlhttp = new XMLHttpRequest();
var theUrl = "/some/express/router";
xmlhttp.open("POST", theUrl);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.send(JSON.stringify({"foo": "bar"}));

//source: https://stackoverflow.com/a/39519299/3957754

    您还有另一种使用 ajax 的选择：

    后端

    在前面的示例中， /some/express/router指的是后端中的某些路由。

    在使用ajax之前，您需要开发一个后端http端点来接收数据并将其存储在您喜欢的数据库中。查看 ：

    • 0

相关问题