【web】js图片压缩并上传——图片压缩-demo01
来源:互联网 发布:江西淘宝大学 编辑:程序博客网 时间:2024/05/18 00:11
引用其他大神的项目进行分析——很好的一个学习材料
http://www.cnblogs.com/axes/p/4603984.html
项目成品图:
运行的状态:
点击上传图片,并随机选择一张图片:
目前来说,HTML5的各种新API都在移动端的webkit上得到了较好的实现。
根据查看caniuse,本demo里使用到的FileReader、Blob、Formdata对象均已在大部分移动设备浏览器中得到了实现(safari6.0+、android 3.0+),所以直接在前端压缩图片,已经成了很多移动端图片上传的必备功能了。
实现思路:
在移动端压缩图片并且上传主要用到filereader、canvas 以及 formdata 这三个h5的api。
三大部分:
【一】获取图片数据
用户使用input file上传图片的时候,用filereader读取用户上传的图片数据(base64格式)
【二】压缩图片
把图片数据传入img对象,然后将img绘制到canvas上,再调用canvas.toDataURL对图片进行压缩
【三】图片上传
获取到压缩后的base64格式图片数据,转成二进制塞入formdata,再通过XmlHttpRequest提交formdata。
如此三步,就完成了图片的压缩和上传。
第一部分:
采用了多文件的方式进行上传,如图所示:
备注:
功能看自身需要,如只需单文件上传可以自行更改,在此不重复论述。
第二部分:图片压缩
这里稍微有些坑!!!!!!!!!
在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上传显然不是一个好办法,因此需要先把图片压缩一下。
但是此项目在压缩的过程中,在电脑浏览器操作时,没什么问题;但是应用到移动端时,会有明显的卡顿,这是因为项目中使用大量算法导致大图片压缩的时间比较长,这样是严重影响用户体验的。
ps:正因为如此,所以本人最后没有采用此项目,但是还是比较有研究的价值!
第三部分:图片上传
完成图片压缩后,就可以塞进formdata里进行上传了,先将base64数据转成字符串,再实例化一个ArrayBuffer,然后将字符串以8位整型的格式传入ArrayBuffer,再通过BlobBuilder或者Blob对象,将8位整型的ArrayBuffer转成二进制对象blob,然后把blob对象append到formdata里,再通过ajax发送给后台即可。
图片的上传可以使用ajax上传,也可以使用XMLHttpRequest对象上传,XmlHttpRequest不仅可以发送大数据,还多出了比如获取发送进度的API,代码里也进行了简单的实现。
此项目采用了XMLHttpRequest的方式进行上传,因此同学们使用项目时,注意下图划起来的部分,这里是需要写后台被访问的接口,而项目中无法提供接口,因此运行时会报错的!!
- 【web】js图片压缩并上传——图片压缩-demo01
- js文件上传—图片压缩
- java 上传并压缩图片
- html5压缩图片并上传
- 上传图片前端js压缩
- JS图片压缩上传处理
- JS 图片压缩上传并在iOS中矫正方向
- 图片压缩上传 上传 压缩
- js,angularjs 图片上传服务器,并解决照片旋转问题,前端图片压缩上传
- 压缩本地图片并上传至服务器
- Android图片压缩并上传到服务器
- ThinkPHP上传图片并压缩为缩略图
- java 上传图片 并压缩图片大小
- java 上传图片 并压缩图片大小
- 上传多张图片并压缩
- 图片处理——压缩上传
- 移动前端—图片压缩上传实践
- 移动前端—图片压缩上传实践
- tcp的拥塞控制
- Jquery And JavaScript
- <mvc:resources> 标签解释
- mybatis动态SQL
- Android:学习AIDL,这一篇文章就够了(上)
- 【web】js图片压缩并上传——图片压缩-demo01
- linux系统时间的设置
- Caffe傻瓜系列(1):数据层及参数
- Emit语法简单实现(含实例)
- java中Serializable问题
- 数据结构知识:链表,队列和栈的区别
- 给studio配置方法注释快捷键的方式:
- 关于腾讯应用管理中心,认领应用
- instancetype和id的区别