我正在使用JavaScript /jQuery给图像添加标记。当我在图像上加上标记并完成后,我必须右键单击图像来保存它,是否可以在图像下保存一个保存按钮,并将文件位置保存到数据库中。
$("#canvas").click(function(e){
getPosition(e);
});
var pointSize = 3;
function getPosition(event){
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
drawCoordinates(x,y);
}
function drawCoordinates(x,y){
var ctx = document.getElementById("canvas").getContext("2d");
ctx.fillStyle = "#ff2626"; // Red color
ctx.beginPath();
ctx.arc(x, y, pointSize, 0, Math.PI * 2, true);
ctx.fill();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<p>
Draw points in the hen ! Remember this example uses a method that will work in almost all devices.
Even if you make zoom in the page, the points will be rendered correctly according to the image and canvas size.<br> Have fun !. This example uses jQuery
</p>
<br>
<canvas id="canvas" width="690" height="651" style="cursor:crosshair;background:url(http://www.mundoanimalia.com/images/articles/66/58/06/7f6ffaa6bb0b408017b62254211691b5/gallina.jpg)"></canvas>