H5技术完美实现调用手机摄像头、相册。图片上传base64,图片压缩、预览、删除以及图片旋转90度的处理--demo。
来源:互联网 发布:winzip软件下载 编辑:程序博客网 时间:2024/06/05 04:50
看了帖子上有很多关于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 0
- H5技术完美实现调用手机摄像头、相册。图片上传base64,图片压缩、预览、删除以及图片旋转90度的处理--demo。
- ios中摄像头/相册获取图片,图片压缩,图片上传
- 调用摄像头和相册,从相册中选择(含有google发布的图片压缩以及自己的图片截取)
- H5图片上传预览
- 拍照/选择相册,图片压缩旋转处理
- 前端input图片的上传和压缩以及图片旋转90度问题解决
- 从摄像头/相册获取图片,压缩图片,上传服务器小结
- iOS -- 摄像头/相册获取图片,压缩图片,上传服务器
- HLMT5中input实现多种文件上传,视频上传,图片上传,调用手机摄像头,照相机,相册功能
- vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
- H5调用手机的摄像头拍照上传以及手机相册选取照片
- H5+ 图片压缩上传
- H5 图片压缩上传
- 移动端上传图片 支持图片预览、压缩、大图分片压缩、压缩后上传 解决了IOS竖屏拍照旋转90度的问题
- H5+MUI+Node.js+Socket.io实现即时聊天以及发送+图片压缩+图片预览保存
- html5的FileReader实现图片上传预览并生成base64
- h5调用摄像头+拍照+上传图片-----h5+js+ajax
- h5调用手机相册摄像头以及文件夹
- Java程序员必须知道的10个调试技巧
- Java8:流 学会用流
- PowerDesigner(五)-概念数据模型(CDM生成LDM,PDM和OOM)
- 扩增子分析解读7物种分类统计,筛选进化树和其它
- PowerDesigner(六)-物理数据模型(PDM逆向工程)
- H5技术完美实现调用手机摄像头、相册。图片上传base64,图片压缩、预览、删除以及图片旋转90度的处理--demo。
- sql injection 类型总结
- Mysql 优化之小表驱动大表
- PowerDesigner(七)-数据库的生成和修改
- swiper函数同一个事件多次连续触发失效解决方案
- 一文带你了解Linux平均负载之谜
- PowerDesigner(九)-模型文档编辑器(生成项目文档)
- react 数据传递
- kaldi学习第一天