HTML5调用手机摄像机、相册功能

在项目中使用到antd-mobile的组件ImagePicker 图片选择器做图片上传，使用起来还是很方便。

因某个业务场景要求上传的照片只能用拍照，不能从相册中选择已有照片，ImagePicker不支持此功能，所以需要对ImagePicker组件稍微改造下。

一、根据已有知识和资料搜索，确认是支持直接打开相机的，关键词是capture。

1. w3c的介绍：HTML Media Capture
2. demo1：HTML Media Capture Examples
3. demo2：HTML Media Capture Syntax Examples

二、分析节点元素和源码

发现ImagePicker组件是利用的input，但是缺少capture。定位ImagePicker的源码（我使用的antd-mobile版本是2.1.10），主要关注点击上传时的操作。

+ 图表代表一个input节点，点击下面的

...

发现input节点是动态生成的，结合源码可以证实这一点。

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); 
    }
  }
复制代码