推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
这是一个创建于 3025 天前的主题，其中的信息可能已经有所发展或是发生改变。
公司有个项目需要实现图片滤镜功能，用户上传一组大图（几十张图片、每张大小 3~50M 不等），需要实现图片的简单滤镜及亮度、对比度调整等功能。
目前我是这样处理的，上传的图片服务器端先进行压缩，提供 1000px 分辨率的缩略图到前端，然后采用 http://camanjs.com/ 这个 js 滤镜插件进行处理，当对 1000px 缩略图进行滤镜及其他操作时，效率都是不错的，但是项目最终需要实现对大图（ 6000 * 3000px ）进行滤镜操作然后保存至服务器端，这时候就出现效率问题了，经常出现浏览器卡死机内存溢出。。试过几个开源的基于 canvas 的滤镜 js 插件，对于大图几乎都是会出现性能问题。
请问下有没有这样的开源解决方案，前端采用缩略图进行滤镜预览操作，最后保存的时候大图的操作放到服务器端进行，谢谢！
目前我是这样处理的，上传的图片服务器端先进行压缩，提供 1000px 分辨率的缩略图到前端，然后采用 http://camanjs.com/ 这个 js 滤镜插件进行处理，当对 1000px 缩略图进行滤镜及其他操作时，效率都是不错的，但是项目最终需要实现对大图（ 6000 * 3000px ）进行滤镜操作然后保存至服务器端，这时候就出现效率问题了，经常出现浏览器卡死机内存溢出。。试过几个开源的基于 canvas 的滤镜 js 插件，对于大图几乎都是会出现性能问题。
请问下有没有这样的开源解决方案，前端采用缩略图进行滤镜预览操作，最后保存的时候大图的操作放到服务器端进行，谢谢！
 |
1
aspirin2d 2016-09-11 11:24:16 +08:00
js 对图形处理的效率是非常差的，如果访问量不大，可以用后端 c++的开源库做处理。
|
 |
2
anai1943 OP @aspirin2d 怎样处理用户预留和最终保存的大图效果一致呢，谢谢。如果全部放到服务器端处理，用户在前端操作的时候，需要大量的等待时间，这样体验应该不会太好。
|
 |
4
momou 2016-09-11 11:43:31 +08:00
前端对小图进行操作展示，保存前端操作的参数，传到后台用 c 处理
|
 |
5
zhidian 2016-09-11 11:52:03 +08:00
腾讯的 HTMl5 图片处理库：[AlloyImage]( http://alloyteam.github.io/AlloyPhoto/)。“怎样处理用户预览和最终保存的大图效果一致”这个还要问的话……我就无语了。
|
 |
6
ericls 2016-09-11 14:04:19 +08:00 via iPhone
我是直接交给浏览器处理的 用 datauri 再转成 blob 放到 multipart 发送到后端
|
 |
8
YuJianrong 2016-09-11 22:05:13 +08:00
camanjs 不是既能跑在浏览器又能跑在 node 里吗？那就浏览器做小图预览，数据传到 node 做大图吧。
|
 |
9
DolphinWood 2016-09-27 15:28:41 +08:00
如果你需要一个基于前端的图片压缩： https://github.com/idiotWu/canvas-compress
|
|
10
DolphinWood 2016-09-27 15:31:31 +08:00
canvas-compress 导出的是 Blob 对象，可以用 [URL.createObjectURL()]( https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL) 创建引用写入到 `<img>` 元素里，然后再配合你现在使用的 camanjs 就可以了 ;)
|
Select Language