Question

我想要在网页上显示非常大的图像（500多MB）。我希望能够缩小到足以一次查看整个图像，或者放大，这样我只能看到1％的图像。

从我可以看到的正常方法是将图像分割成图块并使用http://www.dimin.net/software/panojs/

之类的图像进行渲染

但是，如果我将图像分割成500个图块，并且有人将其视图完全缩小，那么仍然需要拉下500 MB。

我是否可以使用一些模块来动态生成磁贴，这些模块只能显示用户当前缩放级别的最大细节？

例如，如果图像是19,200 x 10,800像素并且有人正在观看它在1920 x 1080显示器上完全缩小，那么我只想发送1920 x 1080的图像。但是如果它们放大到200％然后我想发送一张显示原始图像四分之一的1920 x 1080图像。

我还需要一个叠加和滚动功能（通过拖动图像）。

如果有人能指出我正确的方向，那就太好了。

Answer 1

你应该读到这个：https://stackoverflow.com/a/17550376/2558648 我认为是更好的，

如果您使用了您的想法，很多客户端浏览器将很快死亡（抱歉我的英文不好），客户端将会出现内存不足。

使用虚假地图，您只会显示客户想要的地图。

Answer 2

您想要将类似GraphicsMagick的库用于node.js，它们来自here的示例是：

var gm = require('gm');

gm('/path/to/image.jpg')
.resize(353, 257)
.autoOrient()
.write(writeStream, function (err) {
  if (!err) console.log(' hooray! ');
});

您的下一步将是创建可以请求适当衍生产品的服务，因此您可以获得以下请求：

http://img.mysite.example/product/preview
http://img.mysite.example/product/medium

＆＃34;预览＆＃34;图像可能是完全缩小的100px版本和＆＃34;介质＆＃34;当用户部分放大时，图像可能是您的1920px衍生物（然后使用图块进行详细缩放）。然后更改您的客户端应用程序，以请求所需缩放级别的相应URL。

处理500 MiB图像（或该区域中的任何内容），您可能需要提前执行此缩放，并缓存或永久保留生成的图像。

如何动态缩放非常大的图像

2 个答案: