用js写一个在图片中定位坐标并保存后显示在按钮下方的代码
时间: 2023-06-10 12:09:20 浏览: 66
以下是一个简单的示例代码,用于在图片上单击并获取单击位置的坐标,并将其保存并显示在按钮下方:
HTML:
```html
<div>
<img src="your-image-url" id="myImage" onclick="getImageCoords(event)">
<button id="showCoordsBtn" onclick="showCoords()">Show Coords</button>
</div>
```
JavaScript:
```js
var imageCoords = [];
function getImageCoords(event) {
var x = event.offsetX;
var y = event.offsetY;
imageCoords.push({x:x, y:y});
}
function showCoords() {
var coords = "";
for(var i=0; i<imageCoords.length; i++) {
coords += "x: " + imageCoords[i].x + ", y: " + imageCoords[i].y + "<br>";
}
document.getElementById("showCoordsBtn").innerHTML = coords;
}
```
上面的代码中,我们首先在HTML中定义了一个图片和一个按钮。当单击图片时,`getImageCoords()`函数将获取单击位置的坐标,并将其添加到`imageCoords`数组中。当单击按钮时,`showCoords()`函数将遍历`imageCoords`数组并将坐标显示在按钮下方。
注意,这只是一个简单示例,实际中应该有更多的逻辑和错误处理。