图片滤镜前端及后端解决方案

[anai1943]

公司有个项目需要实现图片滤镜功能，用户上传一组大图（几十张图片、每张大小 3~50M 不等），需要实现图片的简单滤镜及亮度、对比度调整等功能。

目前我是这样处理的，上传的图片服务器端先进行压缩，提供 1000px 分辨率的缩略图到前端，然后采用 http://camanjs.com/ 这个 js 滤镜插件进行处理，当对 1000px 缩略图进行滤镜及其他操作时，效率都是不错的，但是项目最终需要实现对大图（ 6000 * 3000px ）进行滤镜操作然后保存至服务器端，这时候就出现效率问题了，经常出现浏览器卡死机内存溢出。。试过几个开源的基于 canvas 的滤镜 js 插件，对于大图几乎都是会出现性能问题。

请问下有没有这样的开源解决方案，前端采用缩略图进行滤镜预览操作，最后保存的时候大图的操作放到服务器端进行，谢谢！

[aspirin2d]

js 对图形处理的效率是非常差的，如果访问量不大，可以用后端 c++的开源库做处理。

[anai1943]

@aspirin2d 怎样处理用户预留和最终保存的大图效果一致呢，谢谢。如果全部放到服务器端处理，用户在前端操作的时候，需要大量的等待时间，这样体验应该不会太好。

[anai1943]

@aspirin2d 打错了，怎样处理用户预览和最终保存的大图效果一致

[momou]

前端对小图进行操作展示，保存前端操作的参数，传到后台用 c 处理

[zhidian]

腾讯的 HTMl5 图片处理库：[AlloyImage]( http://alloyteam.github.io/AlloyPhoto/)。“怎样处理用户预览和最终保存的大图效果一致”这个还要问的话……我就无语了。

[ericls]

我是直接交给浏览器处理的 用 datauri 再转成 blob 放到 multipart 发送到后端

[guokeke]

@zhidian 我点进去 404..

[YuJianrong]

camanjs 不是既能跑在浏览器又能跑在 node 里吗？那就浏览器做小图预览，数据传到 node 做大图吧。

[DolphinWood]

如果你需要一个基于前端的图片压缩： https://github.com/idiotWu/canvas-compress

[DolphinWood]

canvas-compress 导出的是 Blob 对象，可以用 [URL.createObjectURL()]( https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL) 创建引用写入到 `<img>` 元素里，然后再配合你现在使用的 camanjs 就可以了 ;)