H5技术完美实现调用手机摄像头、相册。图片上传base64,图片压缩、预览、删除以及图片旋转90度的处理--demo。

这里写图片描述
看了帖子上有很多关于H5调用手机摄像头、相册的例子,也有很多可靠的栗子,综合技术点针对HTML5调用用手机相机、相册的的一次代码整合。实现提供完成的Demo提供给大家,可直接应用于项目中需要图片上传的功能。因为是H5直接调用,并没有用到像Cordova或者HTML5Plus的 JavaScript库去调用手机硬件,极少数低端手机可能会调用不到摄像图、或者相册

代码部分示例解释,具体参考附Demo:

1、图片可多选择在type=“file”中属性加上multiple=“multiple” 即可。

<input type="file" multiple="multiple" id="files_upload1" style="opacity: 0;width: 0;"/>

2、图片压缩:
在选择图片完成需要进行图片压缩,不然有得图片大致1到2M,耗流量。这就没追求了更别说爱了。这里压缩机制使用画布:canvas.toDataURL();

3、图片上传:
获取base64字符,这里已经图片选择,转base64字符进行处理。

4、不少部门机型图片拍照或者选择图片好了,图片被旋转了90或者180度,这里我发现过。使用exif.js 对图片进行处理。如果还有小问题,微笑解决。

5、图片预览以及删除
图片预览:在获取图片的基础上展示图片即可
图片删除:图片选择好了会保存到一个数组,删除图片便是移除数组中指定base64字符即可。

附件Demo提供下载学习,希望能帮助大家。
http://download.csdn.net/download/china_guanq/9937333

QQ群:595377655。问题总是能出现并着手解决的地方,欢迎加入。

在这里插入图片描述

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雷斯巴能

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值