显示带有 html 的大图像 [关闭]答案

【问题标题】：showing a BIG image with html [closed]显示带有 html 的大图像 [关闭]
【发布时间】：2015-06-19 16:02:52
【问题描述】：

我是网络开发的新手。我找到了这个网站，http://digitalarchive.mcmaster.ca/islandora/object/macrepo:66896。地图图像的大小实际上约为 1GB。我真的很想知道他们是怎么做到的。当我放大或平移地图时，浏览器似乎请求了一小部分图像。但我不知道该怎么做。可以请任何人建议一些关键字让我学习更多吗？真的谢谢！！。

【问题讨论】：

检查渐进增强，可能是流缓冲？
他们使用的实现叫做OpenSeadragon openseadragon.github.io
这是一张瓷砖地图。每个图块都由浏览器独立下载。每个缩放级别和您要下载的每个区域都应该存在图块。
正如@ssice 所说，图像被分成不同的图块。所以你需要先转换你的图片openseadragon.github.io/examples/creating-zooming-images

标签： jquery html image canvas

【解决方案1】：

他们将图像切成称为图块的正方形部分。

每个图块都有与之关联的元数据，例如索引以及应使用的缩放级别。

根据缩放比例，瓷砖会分层兑现。当您移动要发送到服务器的图像时，您的边界框（您看到的图像的坐标，也称为 bbox）使用此信息，服务器会计算它应该获取哪些图块：

在您显示的每个图像请求的站点中，都以类似 svc.region=6144%2C12288%2C256%2C256&svc.level=4 的内容结尾，其中说明了边界框 (svc.region) 和缩放 (svc.level)

能够执行此操作（但专门处理地理数据）的更高级服务器是：geoserver

对于可视化，请查看openlayers

你也可以找到一个很好的解释here

图片来源www.mapbox.com

【讨论】：

另外，他们切片大图像是有原因的。某些浏览器会限制浏览器中的图像大小，例如iOS Resource Limits，对于地图还有其他原因：您不需要一次使用所有图块，您需要各种分辨率的图块，易于编辑等。