Taro实现微信小程序自定义拍照截图识别

本文链接：https://blog.csdn.net/qq_50598935/article/details/142144818

效果图：

代码：

<template>
    <view class="lary-top" :style="{ height: `${topBarHight}px` }"></view>
    <Camera
        v-show="!canvasShow"
        class="camera-photo"
        :style="{
            width: `${info.windowWidth}px`,
            height: `${info.windowHeight}px`,
        }"
    >
        <view
            class="page-flex"
            :style="{
                width: `${info.windowWidth}px`,
                height: `${info.windowHeight}px`,
            }"
        >
            <view
                :style="{
                    height: `${info.windowHeight}px`,
                    width: `${convasXL}px`,
                }"
                class="page-mask page-mask-lr take-photo"
            >
                <view
                    class="colose-x"
                    :style="{ marginTop: `${convasY - 75}px` }"
                >
                    <cover-image
                        src="@/assets/imgs/icon-x.png"
                        style="height: 24px; width: 24px"
                        @tap="evtBack"
                    >
                    </cover-image>
                </view>
            </view>
            <view
                class="page-content"
                :style="{ height: `${info.windowHeight}px` }"
            >
                <view
                    class="page-mask"
                    :style="{ height: `${convasY - 40}px` }"
                ></view>
                <view
                    class="camera-frame"
                    :style="{
                        width: `100%`,
                        height: `${canvasHeight}px`,
                    }"
                >
                    <view class="corner top-left"></view>
                    <view class="corner top-right"></view>
                    <view class="corner bottom-left"></view>
                    <view class="corner bottom-right"></view>
                </view>
                <view
                    class="page-mask tackPhoto"
                    :style="{ height: `${convasY + 40}px` }"
                >
                    <view class="confirm-photo" @tap="takePhoto">
                        >
                        <view class="in-box"></view>
                    </view>
                </view>
            </view>
            <view
                :style="{
                    height: `${info.windowHeight}px`,
                    width: `${convasXL}px`,
                }"
                class="page-mask page-mask-lr"
            ></view>
        </view>
        <view class="id-card">
            请对准框内拍摄
            <view class="id-card-text">题目</view>
        </view>
    </Camera>
    <view
        v-show="canvasShow"
        class="canvas-main"
        :style="{
            height: `${info.windowHeight}px`,
            width: `${info.windowWidth}px`,
        }"
    >
        <TopNavbar ref="topbarRef" :navbar-props="{ title: '' }">
            <template #left>
                <Left @click="evtBack" /&