|
|
|
|
移动端

结合Vue.js的前端压缩图片方案

在移动Web蓬勃发展的今天,有太多太多的应用需要让用户在移动Web上传图片文件了。在用户上传图片时,图片被提交到后台之前,就对图片进行压缩处理。图片文件大小减小后,上传速度自然会提示,在同样的并发下,后台处理的速度也会得到提升,用户体验得到提升。

作者:mjw来源:segmentfault|2016-11-02 18:43

【新品产上线啦】51CTO播客,随时随地,碎片化学习

这是一个很简单的方案。嗯,是真的。

为什么要这么做?

在移动Web蓬勃发展的今天,有太多太多的应用需要让用户在移动Web上传图片文件了,正因如此,我们有些困难必须去攻克:

  1. 低网速下上传进度缓慢,用户体验差
  2. 高并发下,后台处理较大的上传文件压力大
  3. 或许有更多...

在攻克上面的一些困难时,我们也可以给自己一些疑问:

  1. 真的有必要保存用户上传的原图吗?
  2. 用户还能等多久?
  3. 或许还有更多...

结合上面的一些困难和疑问,再结合我们实际的案例,我们或许可以这样做 —— 在用户上传图片时,图片被提交到后台之前,就对图片进行压缩处理。图片文件大小减小后,上传速度自然会提示,在同样的并发下,后台处理的速度也会得到提升,用户体验得到提升。

有童鞋可能会说,为什么不使用一些主流CDN的表单功能,直接把文件上传到CDN去?当然,完全可以选择那种方案,我只是在众多的方案中选择了一个来用而已,又或者说这是程序员的天性?

准备

上面已经说了 “在用户上传图片时,图片被提交到后台之前,就对图片进行压缩处理。”,那我们马上准备下各种工具吧:

  1. localResizeIMG(核心,用于在前端对图片进行压缩)
  2. Vue.js(处理前端的数据,展现逻辑)
  3. Bootstrap(还要我多说?)

怎么做?

  1. 上传项目变更后,使用localResizeIMG进行压缩
  2. 把数据通过自己期望的方式提交到后台

localResizeIMG在调用时,就可以指定压缩后图片的宽度高度以及质量(详细参考文档),至于要怎么把数据提交到后台,可以参考该库的wiki中提到的方案,一切都很简单。

演示地址

这个例子的仓库地址

本文的解决方法并不是唯一,也不一定是最好,在使用相关的框架/库时遇到的问题,可以去相应的Github仓库查看issue或者wiki。

【编辑推荐】

  1. Promise & Generator——幸福地用同步方法写异步JavaScript
  2. 简单易操作的跨浏览器JavaScript单元测试解决方案
  3. 《JavaScript 闯关记》之基本包装类型
  4. JavaScript知识点整理
  5. 前端开发之走进Vue.js
【责任编辑:枯木 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

UNIX到Linux的移植

本书讲述怎样把UNIX环境下的应用程序移植到Linux环境上运行,是一本综合的开发和解决问题的参考手册 。本书详细描述了当前IT行业中被广泛应...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊