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

标签 javascript amazon-s3 meteor

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

不久前我尝试实现一些东西,但没有成功。我在我们的服务器上设置了 imagemagick,但在生产环境中无法正常工作,因为图像被临时保存在服务器内存上进行处理,但由于内存量有限,这导致了崩溃。我对这种事情没什么经验。

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

我考虑过:

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

如果有人能给我一些建议,这样我就可以开始行动,那将非常有帮助!

最佳答案

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 并行结合起来,而无需具有许多 GB 内存的服务器。在这个 i7 上,我可以有效地同时运行四个,并获得大约 4 倍的加速,因此总体上可能比 ImageMagick 快 12 倍。

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

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

关于javascript - 如何在 Meteor 中优化用户上传的图像以及服务器上现有的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55692664/

相关文章:

bash - s3cmd sync 将错误的文件远程复制到错误的位置

amazon-s3 - 结合wget和aws s3 cp上传数据到S3无需本地保存

html - Semantic-UI Float right of an elem in Segment

if-statement - 检查空格键是否相等?

javascript - 使用 jQuery 或 Javascript 保护或启用链接的 'href' 属性

javascript - Vue.js 路由器不工作

javascript - 注入(inject)的 HTML 仅在 Dom 中解释为字符串

amazon-web-services - AWS CLI - S3 如何以原子方式替换文件夹?

javascript - 如何计算数组中对象值的动态平均值?

meteor - 如何使用 Accounts.onEmailVerificationLink?