允许放大图像但带有“放大镜”界面的深度缩放脚本

Question

我正在寻找一个基于图块的缩放脚本，它允许放大图像，但具有“放大镜”界面。

“放大镜”界面是指类似于 Wadda 的界面，用户可以单击图像的某个部分并放大周围区域。放大的区域包含在覆盖缩略图的圆圈中。 Wadda的演示可以在这里看到：http://maxpert.github.com/wadda/

这个解决方案非常适合我的预期用途，除了脚本需要在任何事情发生之前加载整个高清图像这一重要事实。这对我的项目来说是不可行的，因为我的高清图像可以达到 5000x5000px 或更高。

而不是加载整个高清图像，像 Leaflet-leafletjs.com 这样的基于图块的缩放解决方案会更合适。但我仍然希望“放大镜”缩放 UX 类似于 Wadda。

我的问题是：有没有将Wadda 的用户体验与Leaflet 基于图块的深度缩放相结合的脚本（或脚本的修改）？

用户将能够单击较小缩略图的一部分并在圆形叠加层中看到放大的区域 - 其中放大的区域是使用基于图块的加载来加载的。

PS：抱歉标题太长了。很难用一句话来描述我在寻找什么。

Answer 1

高层次的回答，有一些疑问：

Leaflet TileLayer 类有一个您可以订阅的 tileload 事件。 Leaflet 中的磁贴是img 元素，因此在这种情况下，您可以将img 元素的title 属性设置为磁贴的高分辨率版本，这正是wadda 需要的。

问题在于普通的瓦片服务器提供的瓦片大小都相同。如果放大，您将获得更高分辨率的图块，但区域更小。为了使 wadda 工作，我认为您需要 same 区域的高分辨率瓷砖。因此，如果原始图块是 256x256 像素，并且您想放大到 2 倍，则高分辨率 URL 必须提供相同区域的 512x512 像素图块。

从好的方面来说，考虑到一台服务器（或者可能是两台服务器），我怀疑它会像这样非常可行..

Answer 2

我不知道这有多大帮助，但我想我会补充一点 http://openseadragon.github.com/（与 Leaflet 类似的技术）使用画布渲染到（当然，在支持画布的浏览器上），所以它可能更符合你想要做的事情。您可能会创建一个 OpenSeadragon 查看器，然后在它创建的画布上使用一个剪辑区域。您当然需要管理它的缩放和平移状态，以及在屏幕上移动它以匹配用户的鼠标。

就此而言，也许您可​​以对 Leaflet 执行相同的操作，方法是在其包含的 div 上放置一个非常大的边框半径。

无论如何，这两种解决方案都需要一点点开发，但似乎有可能。

我参与了 OpenSeadragon 项目，所以如果你最终使用它，我很想听听！