一种可以放大图像但具有“放大镜”界面的深变焦脚本

Question

我正在寻找一个瓷砖为基础的缩放脚本，将允许放大的图像，但与“放大镜”界面。

所谓“放大镜”界面，我指的是像Wadda这样的东西，用户可以点击图像的某一部分，并将周围的区域放大。放大后的区域包含在缩略图上的一个圆圈中。Wadda的演示可以在这里看到：http://maxpert.github.com/wadda/

除了脚本需要在发生任何事情之前加载整个高清晰度映像这一重要事实外，这个解决方案对于我的预期使用来说是完美的。这对我的项目是不可行的，因为我的高清晰度图像可以达到5000×5000 or或以上。

而不是加载整个高分辨率图像，基于瓷砖的变焦解决方案，如传单- leafletjs.com将是更合适的。但我仍然希望“放大镜”放大UX类似于Wadda。

我的问题是：是否有一个脚本(或对脚本的修改)将Wadda的UX与基于贴片的传单的深度缩放相结合？

用户可以点击一个较小的缩略图的一部分，并在一个圆形覆盖范围内看到放大的区域--在该区域中，缩放的区域使用基于瓷砖的加载方式加载。

PS:对不起，标题太长了。很难用短短的一句话来描述我要找的东西。

Answer 1

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

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

问题是普通的瓷砖服务器所提供的瓦片大小都是相同的。如果你放大，你会得到一个更高分辨率的瓷砖，但是面积更小。要想工作，我想你需要同一地区的高分辨率瓷砖。因此，如果原始地砖是256x256px，并且要放大到2x，那么高分辨率URL必须提供同一区域的512x512px瓷砖。

从好的方面来说，如果有一个服务器(或者两台服务器)，我怀疑这样做是可行的。

Answer 2

我不知道这是否有多大帮助，但我想补充一下，http://openseadragon.github.com/ (类似于传单的技术)使用画布来呈现(当然，在支持画布的浏览器上)，所以它可能更符合您的尝试。您可以创建一个OpenSeadragon查看器，然后在它创建的画布上使用一个裁剪区域。当然，您需要管理其缩放和pan状态，并将其移动到屏幕周围以匹配用户的鼠标。

在这个问题上，也许你也可以通过在它包含的div上放置一个非常大的边界半径来做同样的事情。

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

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