压缩&调整用户上传的图像大小

时间:2015-02-23 21:18:12

标签: javascript angularjs node.js image amazon-s3

我正在构建一个包含大量用户上传图片的网站(如airbnb假设)

到目前为止,该网站会将您提交的任何图片上传到亚马逊s3,然后相应地显示。有时这些图像太重,会增加页面加载时间。

我想将此图像的大小调整为所需的分辨率并尽可能压缩(转换为jpeg)以增加加载时间并减少流量。

我发现这可以通过以下方式完成:

  • 创建HTML画布,在浏览器中进行相关的转换,然后上传。
  • 将图像上传到服务器,然后运行一些后端任务以减小大小和压缩。

每种方法有哪些好处?哪个最常见?在每种情况下我应该考虑什么?

我的堆栈目前是node.js / angular。由于项目处于开发阶段,我现在不打算使用CDN

提前感谢!

2 个答案:

答案 0 :(得分:1)

您需要安装并将imagemin添加到您的grunt任务中这里有一个链接供您使用https://github.com/gruntjs/grunt-contrib-imagemin 祝你好运。

答案 1 :(得分:1)

对于记录,我发现最简单的解决方案是加载用户在html5画布中选择的任何图像并将其转换为jpeg,然后上传jpeg并在后端我将使用节点imagemagick包调整大小。

通过转换为前端中的jpeg,您可以最大限度地减少上传时间,同时不会降低性能,并将输入格式规范化为后端服务。