在浏览器中显示大图像：允许缩放：单击时，添加标记和标记检索像素 x/y

Question

感觉我想做的事情应该相当常见，但我找不到任何插件可以做到这一点。

我想在浏览器中显示大图像，允许用户放大它（像 Zoomify 或地图查看器这样的 UI），并允许用户单击图像并添加标记。标记应返回原始图像的像素 x/y 坐标。

它基本上只是用户标记图像中特定像素 x/y 值的一种方法。

图像是否平铺（如 Zoomify）或是否只是带有缩放控件的简单图像并不重要。我宁愿使用 jquery 而不是 flash，但无论哪种方式都没关系。

任何帮助将不胜感激。

谢谢。

Answer 1

OpenLayers 是为地图编写的 - 它可用于平移和缩放平铺图像。
它是根据地图制作的，所以我不确定你是否可以使用它。

有用于添加标记、读取点击坐标等的扩展。

Answer 2

查看此 jQuery 教程。您可以修改它以满足您的需要。

根据教程：以下是查找特定元素而不是页面内的位置的示例：

$("#yourImageId").click(function(e){

     var x = e.pageX - this.offsetLeft;
     var y = e.pageY - this.offsetTop;

     $('#log').html(x +', '+ y);

     //Do Something to add a push pin at these coordinates.

});