Javascript获取背景图像的可见部分的坐标

Question

我有一个div让我们说

<div class="cover"></div>

带背景图片的

可以说

.cover{
  width:500px;
  height:300px;
  background: url("../../../static/talentapp/images/cover.jpg") no-repeat;
  background-position: center;
}

图像是1000像素×600像素，因此图像的隐藏部分。 如何使用JavaScript获取图像可见部分的坐标？任何帮助将不胜感激。

Answer 1

var a = document.getElementsByClassName('cover')[0];
a.addEventListener('click',function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
alert("X Coordinate: " + x + " Y Coordinate: " + y);
})

.cover{
  width:500px;
  height:300px;
  background: url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?w=940&h=650&auto=compress&cs=tinysrgb") no-repeat;
  background-position: center;
}

<div class="cover"></div>