H5 调用手机摄像机、相册
date
Mar 13, 2020
slug
vjbgoajo
status
Published
tags
Web
summary
type
Post
在项目中使用到 antd-mobile 的组件ImagePicker 图片选择器做图片上传，使用起来还是很方便。
因某个业务场景要求上传的照片只能用拍照，不能从相册中选择已有照片，ImagePicker 不支持此功能，所以需要对 ImagePicker 组件稍微改造下。
一、根据已有知识和资料搜索，确认
<input type="file">是支持直接打开相机的，关键词是capture。- w3c 的介绍：HTML Media Capture
二、分析节点元素和源码
input节点
发现 ImagePicker 组件是利用的 input，但是缺少
capture。定位 ImagePicker 的源码（我使用的 antd-mobile 版本是 2.1.10），主要关注点击上传时的操作。+ 图表代表一个 input 节点，点击下面的<div class="am-flexbox-item">...</div>发现 input 节点是动态生成的，结合源码可以证实这一点。
169871fbafc2
ImagePicker 目前（2019-02-21 09:49:07）不支持
capture属性，所以改造方案就是对input改造。下面是 React 项目中的解决方案，即手动添加capture： componentDidMount () { const inputs = document.getElementsByTagName('input'); for (let index = 0; index < inputs.length; index++) { const element = inputs[index]; element.setAttribute("capture", true); } }