H5 前置摄像头 图片压缩上传

最近 接到一个需求 - 微信公众号里面嵌入人脸识别。想着 似乎还挺复杂的。结果 需求说 就是采集图片 不用识别。我就emmm叫个鬼的人脸识别…
所以如此贴近当代科技生活的AI识别，就变成了图片采集。当然问题也就简化了。

1. 调起前置摄像头
2. 图片压缩上传

调起前置摄像头

这个问题 网上有很多，大致是input 和 navigator.getUserMedia 这两种。我选择的第一种。
如果大家有更好的兼容方法 欢迎推荐。

<label htmlFor="pic" className={styles.sumit}>
    {subContent}
    <input className={styles.input} id="pic" value='' accept="image/*" type="file" onChange={(e) => this.openCamera(e)} />
</label>

//需要添加 capture 属性。react中实现如下
//ios 可以调起前置 安卓不固定。比如我 偶尔能调起emmm
componentDidMount() {
    document.getElementById('pic').setAttribute('capture', 'user');
};

canvas图片压缩

这里参考 前端图片压缩上传(纯js的质量压缩，非长宽压缩)
代码如下：

 open