V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
anai1943
V2EX  ›  JavaScript

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

  •  
  •   anai1943 · 2016-09-11 09:19:20 +08:00 · 3940 次点击
    这是一个创建于 2114 天前的主题,其中的信息可能已经有所发展或是发生改变。
    公司有个项目需要实现图片滤镜功能,用户上传一组大图(几十张图片、每张大小 3~50M 不等),需要实现图片的简单滤镜及亮度、对比度调整等功能。

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

    请问下有没有这样的开源解决方案,前端采用缩略图进行滤镜预览操作,最后保存的时候大图的操作放到服务器端进行,谢谢!
    10 条回复    2016-09-27 15:31:31 +08:00
    aspirin2d
        1
    aspirin2d  
       2016-09-11 11:24:16 +08:00
    js 对图形处理的效率是非常差的,如果访问量不大,可以用后端 c++的开源库做处理。
    anai1943
        2
    anai1943  
    OP
       2016-09-11 11:30:35 +08:00
    @aspirin2d 怎样处理用户预留和最终保存的大图效果一致呢,谢谢。如果全部放到服务器端处理,用户在前端操作的时候,需要大量的等待时间,这样体验应该不会太好。
    anai1943
        3
    anai1943  
    OP
       2016-09-11 11:31:49 +08:00
    @aspirin2d 打错了,怎样处理用户预览和最终保存的大图效果一致
    momou
        4
    momou  
       2016-09-11 11:43:31 +08:00
    前端对小图进行操作展示,保存前端操作的参数,传到后台用 c 处理
    ericls
        6
    ericls  
       2016-09-11 14:04:19 +08:00 via iPhone
    我是直接交给浏览器处理的 用 datauri 再转成 blob 放到 multipart 发送到后端
    guokeke
        7
    guokeke  
       2016-09-11 15:34:19 +08:00 via Android
    @zhidian 我点进去 404..
    YuJianrong
        8
    YuJianrong  
       2016-09-11 22:05:13 +08:00
    camanjs 不是既能跑在浏览器又能跑在 node 里吗?那就浏览器做小图预览,数据传到 node 做大图吧。
    DolphinWood
        9
    DolphinWood  
       2016-09-27 15:28:41 +08:00
    如果你需要一个基于前端的图片压缩: https://github.com/idiotWu/canvas-compress
    DolphinWood
        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 就可以了 ;)
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2045 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 16:20 · PVG 00:20 · LAX 09:20 · JFK 12:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.