结合vuejs的前端压缩图片方案

《结合vuejs的前端压缩图片方案》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、结合Vuejs的前端压缩图片方案在移动Web蓬勃发展的今天，有太多太多的应用需要让用户在移动Web上传图片文件了。在用户上传图片时，图片被提交到后台之前，就对图片进行压缩处理。图片文件大小减小后，上传速度自然会提示，在同样的并发下，后台处理的速度也会得到提升，用户体验得到提升。作者：mjw来源：segmentfault

2、2016-11-0218:43 收藏  分享这是一个很简单的方案。嗯，是真的。为什么要这么做?在移动Web蓬勃发展的今天，有太多太多的应用需要让用户在移动Web上传图片文件了，正因如此，我们有些困难必须去攻克

3、：1.低网速下上传进度缓慢，用户体验差2.高并发下，后台处理较大的上传文件压力大3.或许有更多...在攻克上面的一些困难时，我们也可以给自己一些疑问：1.真的有必要保存用户上传的原图吗?2.用户还能等多久?3.或许还有更多...结合上面的一些困难和疑问，再结合我们实际的案例，我们或许可以这样做——在用户上传图片时，图片被提交到后台之前，就对图片进行压缩处理。图片文件大小减小后，上传速度自然会提示，在同样的并发下，后台处理的速度也会得到提升，用户体验得到提升。有童鞋可能会说，为什么不使用一些主流CDN的表单功能，直接把文件上传

4、到CDN去?当然，完全可以选择那种方案，我只是在众多的方案中选择了一个来用而已，又或者说这是程序员的天性?准备上面已经说了“在用户上传图片时，图片被提交到后台之前，就对图片进行压缩处理。”，那我们马上准备下各种工具吧：1.localResizeIMG(核心，用于在前端对图片进行压缩)2.Vue.js(处理前端的数据，展现逻辑)3.Bootstrap(还要我多说?)怎么做?1.上传项目变更后，使用localResizeIMG进行压缩2.把数据通过自己期望的方式提交到后台localResizeIMG在调用时，就可以指定压缩后图片

5、的宽度高度以及质量(详细参考文档)，至于要怎么把数据提交到后台，可以参考该库的wiki中提到的方案，一切都很简单。演示地址这个例子的仓库地址本文的解决方法并不是唯一，也不一定是最好，在使用相关的框架/库时遇到的问题，可以去相应的Github仓库查看issue或者wiki。【编辑推荐】1.Promise&Generator——幸福地用同步方法写异步JavaScript2.简单易操作的跨浏览器JavaScript单元测试解决方案3.《JavaScript闯关记》之基本包装类型4.JavaScript知识点整理5.前端开发之走进V

6、ue.js