uniapp开发h5页面调用摄像头并且实现自动截图转化base64上传服务器

1.使用一个插件进行调用摄像头，这是一个二维码扫描的插件，把里面的样式更改后可以实现这样的效果

2.插件地址：H5调用摄像头识别二维码（原生H5调用，不需要任何sdk，本地扫描识别，不需要后端） - DCloud 插件市场

 3.下载  npm install --save html2canvas  并且引入  import html2canvas from 'html2canvas';

这个可以进行截图

4.整个功能代码如下

<template>
    <view id="page">
        <mumu-get-qrcode @success='qrcodeSucess' @error="qrcodeError"></mumu-get-qrcode>
    </view>
</template>

<script>
    import html2canvas from 'html2canvas';
    import mumuGetQrcode from '@/uni_modules/mumu-getQrcode/components/mumu-getQrcode/mumu-getQrcode.vue'
    export default {
        components: {
            mumuGetQrcode
        },
        data() {
            return {
                title: 'Hello',
                timerIntv: null,
            }
        },
        onLoad() {},
        methods: {
            qrcodeSucess(data) {
                uni.showModal({
                    title: '成功',
                    content: data,
                    success: () => {
                        uni.navigateBack({})
                    }
                })
            },
            qrcodeError(err) {
                console.log(err)
                uni.showModal({
                    title: '摄像头授权失败',
                    content: '摄像头授权失败，请检测当前浏览器是否有摄像头权限。',
                    success: () => {
                        uni.navigateBack({})
                    }
                })
            },
            ScreenShot() {
                //使用定时器
                var that = this;
                that.timerIntv = setInterval(() => {
                    // 待处理业务逻辑    
                    let dom = document.querySelector('#page'); // 获取dom元素
                    html2canvas(dom, {
                        width: dom.clientWidth, //dom 原始宽度
                        height: dom.clientHeight,
                        scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
                        scrollX: 0,
                        useCORS: true //支持跨域，但好像没什么用
                    }).then(canvas => {
                        // 将生产的canvas转为base64图片
                        let base64 = canvas.toDataURL('image/png');
                        const a = document.createElement('a');
                        a.href = base64;
                        console.log(a.href);
                        a.setAttribute('download', 'screenshot');
                        a.click();
                    });
                }, 1000)
            }
        },
        onShow() {
            this.ScreenShot()
        }
    }
</script>
<style>
</style>