如何将图像分割成多个pices并按用户的要求加入它们

Question

我正在尝试将大图像（大小> 80 MB）加载到网页中。用户实际上不需要立即看到整个图像，只需要查看所请求的部分。

图像的尺寸约为 10k x 10k 。

我环顾四周但是找不到合理的解决方法。

我想根据需要将图像分成若干块（对于前9个，每个3k x 3k）并根据用户请求将它们加载到页面中或移动到图像的下一部分（例如，如果用户）越过 3k x 3k 边界，服务器将根据需要发送侧面或底部。

我确实找到了如何分割图像的方法，但却无法动态地找到这种方法并将它们动态地缝合在一起。

更新

我尝试使用 Microsoft Deep Zoom Composer ，但它无效。我认为它不支持如此大的图像尺寸。当我在 Microsoft PhotoSynth 中尝试相同的图像时，我得出了这个结论，并收到一条错误消息，它只支持 32MB 的文件。 Deep Zoom Composer 和 Photo Synth 使用相同的文件格式，因此我认为它们可能具有相同的文件大小限制。

深度缩放Composer没有产生有意义的错误消息，因为错误消息是文件格式不正确，但文件格式正确（即jpg）。 感谢

Answer 1

您可以使用Microsoft Deep Zoom Composer

Answer 2

由于这是一个相当大的显示图像，我假设您无法将其调整为更易于管理的尺寸，您必须在某个网格中显示它。您可以使用与谷歌地图相同的想法，当用户在视图中移动时，您可以单独加载块。

您将如何构建该视图将取决于您，因为即使3k x 3k像素也比大多数屏幕分辨率稍大。你可能想要更小的块。

我不知道有任何组件可以做你需要的东西，但滚动你自己应该不会太困难。您可以使用一些容器div，其中排列有网格div，当每个容器进入视图时，您可以加载背景图像位，或者您可以渲染固定数量的div作为网格并在“视口”移动时加载必要的背景图像。

希望这是有道理的。

Answer 3

我认为你应该将它转换为另一种文件格式，例如bmp，这样你就可以轻松地在文件中导航到所需的像素，用这些像素组成一个新图像并发送它，或保存它并重新加入它。最大的问题是新的图像尺寸。