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

How to scale very large images dynamically

本文关键字：非常 图像 缩放 何动态 动态      更新时间：2023-09-26

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

据我所见，通常的方法是将图像分割成瓦片，并用类似的东西进行渲染http://www.dimin.net/software/panojs/

然而，如果我将图像分割成500个瓦片，并且有人将其完全放大，仍然需要降低500MB。

有没有一些模块我可以用来动态生成只有足够大的瓷砖来显示用户当前缩放级别的最大细节？

例如，如果图像是19200 x 10800像素，并且有人在1920 x 1080的监视器上观看它，那么我只想发送1920 x 10800的图像。但如果他们放大到200%，那么我想发送一张1920 x 1080的图像，显示原始图像的四分之一。

我还需要一个覆盖和滚动的能力（通过拖动图像）。

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

您将希望在node.js中使用GraphicsMagick这样的库，这里的示例是：

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

当用户部分放大时，"预览"图像可能是完全缩小的100px版本，而"中等"图像则可能是1920px的衍生图像（然后使用平铺进行详细缩放）。然后更改客户端应用程序以请求所需缩放级别的适当URL。

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

您应该阅读以下内容：https://stackoverflow.com/a/17550376/2558648我觉得更好，

如果你使用你的想法，很多客户端浏览器会很快失效（很抱歉我的英语不好），客户端会内存不足。

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

相关文章：