javascript - 如何优化用户上传的图片以及 Meteor 服务器上的现有图片

Question

目前，我的团队正在运行一个 meteor 应用程序，其中包含数十万张全尺寸的超大图片。我们早就应该这样做了，但我们需要一种方法来优化它们以帮助缩短加载时间。我正在寻找一种解决方案，当用户从我们的应用程序上传图像时(例如:全尺寸、中型、缩略图)能够保存多种尺寸的图像，并且还可以自动旋转并允许用户旋转。我们使用 Amazon S3 来托管我们所有的图像。我们还需要一种从服务器端将所有现有图像转换为这些尺寸格式的方法。

我前段时间尝试过实现一些东西，但没有成功。我在我们的服务器上设置了 imagemagick，但在生产中遇到了问题，因为图像被临时保存在服务器内存中进行处理，但由于内存量有限，这导致了崩溃。我对这种事情没有什么经验。

我的第二个想法是使用 HTML Canvas 来调整图像的大小。我认为这适用于新上传的图像。但我仍在寻找一种方法来处理现有图像。

我考虑过:

• 也许 AWS 有一种内置的方式来处理它们。我不介意那样做。
• 某种 Meteor/node 包可以帮助解决这个问题。
• 设置另一台服务器来处理图像。
• 使用一些第三方图像处理。

如果有人能给我一些建议，让我开始行动，那将非常有帮助!

Answer 1

libvips可以在不使用内存或磁盘的情况下调整图像大小 --- 像素以小块的形式流过系统，同时进行解码和重新编码。

例如，对于 10k x 10k 像素的 JPG 图像，我看到:

$ vipsheader wtc.jpg 
wtc.jpg: 9372x9372 uchar, 3 bands, srgb, jpegload
$ /usr/bin/time -f %M:%e vipsthumbnail wtc.jpg -s 5000x5000 -o x.jpg
98720:0.65

这是一个 4 核 8 线程的 i7。它使用 98MB 内存并需要 0.65 秒的实时时间。有一个 chapter in the docs introducing vipsthumbnail .

为了与 ImageMagick 6 进行比较，我看到了:

$ /usr/bin/time -f %M:%e convert wtc.jpg -resize 5000x5000 x.jpg
1263232:2.02

1.3GB 内存，需要 2 秒的实时时间——大约多 10 倍内存，慢 3 倍。

因为 vipsthumbnail 使用的内存非常少，您可以将它与 GNU parallel 结合使用，而不需要服务器有很多很多 GB 的内存。在这个 i7 上，我可以同时运行四个并获得大约 4 倍的加速，因此可能比 ImageMagick 整体快 12 倍。

sharp is a popular node binding for libvips ，这可能更方便。还有针对 Python、Ruby、PHP、Go、Lua 等的绑定(bind)。

(免责声明:我是 libvips 维护者之一，所以我不是很中立)