<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>假设图片的固定高度是500px，想实现点击图片获取图片实际的xy坐标</h1>
<img style="height: 500px;" onclick="clickHotspotImage(event);" src="https://pic.bythedu.com/defeng_boke/image_1678758044465.png" alt="Hotspot image"/>
<script>
function loadImg(){
let img = new Image();
img.src = 'https://pic.bythedu.com/defeng_boke/image_1678758044465.png'
img.onload = function(e){
// console.log("w h",e,this.width,this.height)
//1654 861
}
}
function clickHotspotImage(event) {
loadImg()
var xCoordinate = event.offsetX;
var yCoordinate = event.offsetY;
// console.log(xCoordinate ,yCoordinate,event)
// 500为设定高度 861为原图片高度
let beilv = 861/500
let x = parseInt(beilv * xCoordinate)
let y = parseInt(beilv * yCoordinate)
console.log(x,y)
alert(x+"---"+y)
}
</script>
</body>
</html>
