移动端图片上传的几个操作

原创 世民 随笔 移动端开发 616阅读 2017-05-05 17:26:32 举报

每次开发一个功能,总有一种感觉:用户体验不好,只是实现了基本功能。这次又是

移动端图片上传步骤大致可分成:

1 图片上传
图片上传直接利用h5 的input标签,因为这里是图片,所以accept="image/*"
html 代码

js监听上传按钮,然后读取base64格式图片,将图片展示出来

2、图片预览
利用FileReader() 对象读出图片,我这里的操作是读出的图片替换添加按钮的src,实现预览的功能

javascript 代码

3 图片处理
由于ios等手机有拍摄方向的问题,android没有,所以要压缩图片之前修正图片旋转角度
角度利用EXIF,将上一步得到的图片传到rotateImage(img)返回一张修正后的图片
代码如下:
javascript 代码

4 对超过200kb的图片做图片压缩(前端用canvas对图片压缩)
主要var ndata = this.canvas.toDataURL('image/jpeg', 0.1); (根据需要进行压缩)

5 压缩完成,需要利用blob来提交给后台,类似file
一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。
File 接口基于Blob,继承 blob功能并将其扩展为支持用户系统上的文件。

javascript 代码

6 压缩完成之后提交到后台
javascript 代码

完整代码在github:https://github.com/Young1993/lishimin

欢迎来提意见

评论 ( 4 )
最新评论
1007561607 3F 2017-05-09 00:01:07 4F

一张一张的上传

世民 1F 2017-05-06 08:43:33 3F

你是说一次上传多张图片是吧,原理是一样的,就是展示预览需要修改

xiaxia0077 1F 2017-05-06 08:34:24 2F

做过

1007561607 2017-05-05 17:44:29 1F

你做过多图上传吗??