【前端】h5怎么调用手机拍摄上传照片的功能？

如题，第一次做这种功能，完全没有头绪，能给个详细点的demo参考一下吗？
注意，重点是怎么调用手机拍摄
我再说的完整一点，要求是这样的，首先是个App，要求是点击按钮既出现系统拍摄功能也要有相册选择图片，然后就是再上传了

回答

直接input type=file

最简单的办法调用微信的api

简单说一下思路，用input就可以呀

如果只想拍照上传而不是选择相册里的图片，可以添加属性capture="camera"，如果你希望自定义上传组件的样式，可以隐藏这个input在上面遮盖一个别的元素，之后用filereader来获取图片，用FormData来进行上传就行。

最后想说，这些在百度和google上可以搜到更加完善的答案

用手机浏览器测试的时候请给浏览器相机权限，不如会进入选择文件的界面。

既然说了是app中的，那麻烦说清楚是自己写的h5打包成app，还是基于别的app做的第三方应用开发。前一种就是上面的方面，如果不能调用相机，请检查应用权限，后一种请去找相应app的开发文档，比如微信就提供js-sdk，有接口调用相机。

参考：MDN <input>

不知道你这 H5 页面是要跑在浏览器还是 App 中，QQ号码交易平台地图要是在浏览器的话 <input type=”file” accept=”image/*;capture=camera”> 貌似就可以要是 App 的话,貌似的要接口。

既然是APP可以用js直接调用原生的拍照

你的app是嵌套在原生的框架里还是纯的h5？
如果是嵌套在原生框架里可以用window.app.xxx调用原生拍摄上传的方法，选择图片后再调用原生的方法获取base64编码的图片显示在页面上，上传时可以将图片转为Blob对象上传
如果是纯h5，可以用input的file，但是有兼容性，我也没有用过
我们的项目是用第一种方法，没有兼容性问题，但是有点麻烦，如果有更好的方法，希望能够不吝赐教

app中的话要向客户端要一个接口，以我做过的一个项目为例，客户端提供js工具包调用客户端的一些设备信息/接口
然后我前端这头判断是否是在客户端中，这部分是通过这个客户端集成的js文件的调用，来判断是否在客户端中，
从而
在客户端中通过接口调用设备的摄像头
在浏览器中直接调用<input type=”file” accept=”image/*” capture=”camera” >
在微信端中使用js-sdk调用微信集成的拍照功能
ps:js-sdk就是类似我说的由客户端提供的js接口工具文件

上传部分的话
你需要找后端要上传文件的接口，按照后端接口的要求上传即可，与app无关

更多相关文章

随机推荐