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

Question

我有一个非常大的图像(500+ MB)，我想在网页上显示。我希望能够缩小到足以一次查看整个图像，或者放大到只能看到图像的 1%。

据我所知，正常的方法是将图像分割成图 block 并使用类似 http://www.dimin.net/software/panojs/ 的内容渲染它们。

但是，如果我将图像分成 500 个图 block ，而有人在完全缩小的情况下查看它，则仍然需要缩小 500 MB。

是否有一些模块可以用来动态生成图 block ，这些图 block 的大小仅足以显示用户当前缩放级别的最大细节？

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

我还需要一个覆盖层和滚动功能(通过拖动图像)。

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

Answer 1

您需要使用像 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

其中“预览”图像可能是完全缩小的 100 像素版本，而“中”图像可能是用户部分放大时的 1920 像素衍生图像(然后使用图 block 进行详细缩放)。然后更改您的客户端应用程序以请求所需缩放级别的适当 URL。

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