基于浏览器的“一维”平移/缩放大图像

Question

我想在浏览器中显示一个非常大的PNG图像（高度约100万像素，宽度只有几百像素），以便用户可以平移和缩放它。浏览器无法处理该图像。所以我想把它切成更小的瓷砖。基本上就像 OpenStreetMap、Apple/Google 地图等一样。

这里的特别之处在于图像只能沿Y轴缩放和滚动。 X 轴应始终保持不变，即其缩放比例不得改变且不得平移。 （缩小时图像会被垂直“压缩”。）

我不一定想重新发明轮子（即使用画布元素和 JavaScript 来实现我自己的实现）并想知道是否有现成的解决方案可以解决这个问题。使用 Leaflet 和 OpenSeadragon，我没有找到任何将缩放和平移限制到一个轴的选项。

Answer 1

您可以使用 OpenSeadragon 来实现此目的。创建查看器时，只需在选项中包含

panHorizontal: false

即可。

如果您想支持缩放并希望在放大/缩小时确保图像完全水平居中，可能需要一些额外的工作。您可以使用

visibilityRatio: 1

或其他方法来完成此操作，或者您可以直接使用以下方法来控制：

viewer.addHandler("viewport-change", () => {
  const center = viewer.viewport.getCenter();
  center.x = 0.5;
  viewer.viewport.panTo(center, true);
});