怎么用html5或js调用手机的摄像头拍照上传以及调用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么用html5或js调用手机的摄像头拍照上传以及调用相关的知识，希望对你有一定的参考价值。
h5不能直接调用摄像头，只能用<input type="file" />上传图片来间接调用摄像头 参考技术A 你给的网页用的是 ，在ios端点击时会提示选择图片或相机，安卓端要看浏览器对这两个属性的优化，部分浏览器会直接跳转到资源管理器，优化做得好的可以直接提示选择相册或相机。这两个属性的用法可以去w3cschool上面看看。怎么用html5或js调用手机的摄像头拍照上传以及调用图片拍照上传解决方案
参考技术A 微信内置浏览器，和一些主流浏览器支持调用摄像头，但也有很多不支持调用摄像头，仅支持相册。
如果是WebView中，就需要客户端支持了，android和ios的权限也是问题。
formData 简介
简单的说就是：通过formData，我们可以用ajax方式来发送表单数据；以前上传图片是需要用form表单提交的。
我们知道浏览器默认显示的文件上传按钮是很丑的，通常UI都会对上传按钮进行设计。有以下几种方案来写样式。
弊端：
坑
通过ref获取上传按钮。
ref方式
event.target方式
坑：
FileReader 简介
通过 readAsDataURL() ，在读取操作完成后，result属性中将包含一个data:URL格式的字符串以表示所读取文件的内容。
base64字符串
兼容性
我在safari中测试，发现是支持的。
URL.createObjectURL 简介
通过URL.createObjectURL()创建一个URL对象，这个URL对象表示指定的file对象或Blob对象。
兼容性
张鑫旭的文章： HTML5 file API加canvas实现图片前端JS压缩并上传
张鑫旭的文章： 理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型
使用Camera API
张鑫旭
以上是关于怎么用html5或js调用手机的摄像头拍照上传以及调用的主要内容，如果未能解决你的问题，请参考以下文章
怎么用html5或js调用手机的摄像头拍照上传以及调用手机相册选取照片