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

H5技术完美实现调用手机摄像头、相册。图片上传base64,图片压缩、预览、删除以及图片旋转90度的处理--demo。_第1张图片
看了帖子上有很多关于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。问题总是能出现并着手解决的地方,欢迎加入。

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

你可能感兴趣的:(JavaScript,-,Jquery,HTML,-,HTML5)