javascript - making points on image with jquery and saving it to SQL with php
问题描述
I am using Javascript/jquery to add markers to an image. When I have put the marks on the image and finished I have to right click the image to save it, is it possible to have a save button under the image and save the file location to the db.
$("#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>
解决方案
推荐阅读
- html - CSS:我想创建带有渐变颜色系统的加载器
- android-studio - 在 Android Studio 3.6+ 中默认设置 XML 拆分视图?
- postgresql - 函数不在游标中重新运行查询
- amazon-web-services - AWS Lambda $LATEST 版本的定义
- azure - 如何限制 Azure 中的活动目录权限?
- ios - 自定义信号处理程序不适用于 iOS 上的 Firebase Crashlytics
- javascript - Node.js fs.readFile 返回文件的先前版本
- python - 我试图让我的程序创建一个文件来保存输入,但我不希望它出现两次。(Python)
- html - 如何构建一个宽度为 50% 的梯形菜单背景
- batch-file - what does ":2" mean in set variable in batch file