APP开发-使用Vue3+vant+html5+ 实现相机拍照，选取相册图片，裁剪图片以及提取图片中的文字等功能（一）

没用使用过Html5+请参考另一篇博客：如何在Vue项目里面使用Html5+

一、需求分析

1、可以选择相机拍照，或者选择相册图片
2、图片确定以后，要对图片进行裁剪，保留用户选择部分
3、对裁剪之后的图片进行文字识别，识别出所有的文字内容
4、根据识别出来的文字进行业务查询

二、调用摄像头和相册功能的实现

对于第一个需求我们可以使用vant里面的Uploader组件直接进行调用，但是在这个地方我们的显示样式不同，
所以需要我们在手写一个调用相机和相册的方式，这里要使用html5+ 的方法。
对于没有固定样式要求的我还是推荐使用Uploader组件，因为它已经封装了我们需要的调用相机、相册、文件等，用起来还是比较方便。
我们在做评价的时候，上传图片就是直接使用Uploader，还是比较方便的。
这是Uploader组件的显示方式，

这个是需求的显示方式

显示这个需求方式挺容易实现的。

完整的效果图

2.1 首先要给扫描图标加一个点击事件

<div>
    <!--扫一扫-->