微信小程序实现圆形人脸取景框

效果：

1680512258788.png

源码：

<template>
    <view class="cameraBox">
        <text class="text1">
            为保证是本人操作
        </text>
        <text class="text2">
            需采集你的人脸信息以核实身份
        </text>
        <camera device-position="front">
            <cover-image src="../../static/imgs/shibie.png" class="shibie" bindtap="changePos"></cover-image>
        </camera>
        <text class="text3">
            请确保正脸出现在取景框中，以便识别
        </text>
        <text class="text4">
            一旦提交后则不能更改，错误信息会影响正常参加会议
        </text>
        <view class="cameraBox_btn" @click="getPhoto">
            点击开始拍摄
        </view>
    </view>
</template>
<script>
    export default {
        name: 'index',
        data() {
            return {
                image: ''
            }
        },
        onLoad() {
            
        },
        methods: {
            getPhoto() {
                uni.showLoading()
                // 创建相机上下文对象,获取唯一的相机对象
                const context = uni.createCameraContext()
                // 照相功能
                context.takePhoto({
                    quality: "high",
                    success: res => {
                        // 照相成功的回调
                        this.upload(res.tempImagePath)
                        uni.hideLoading()
                   },
                   fail: () => {
                        uni.showToast({
                          title: "拍摄失败",
                        })
                        uni.hideLoading()
                    }
                })
            },
            // 上传图片
            upload(filePath) {
                uni.uploadFile({
                    url: 'https://xxxxxxx', // 上传接口
                    filePath: filePath,
                    name: 'file',
                    header: {
                        'content-type': 'multipart/form-data',
                        'Authorization': 'Bearer ' + uni.getStorageSync("token")
                    },
                    success: (res) => {
                        const data = JSON.parse( res.data)
                        if (data.code == 200) {
                            this.image = data.data.path
                        } else {
                            uni.hideLoading();
                            uni.showToast({
                                title: data.message || '上传失败',
                                icon:'none'
                            })
                        }
                    },
                    fail: err => {
                        uni.hideLoading();
                        uni.showToast({
                            title: '上传失败',
                            icon:'none'
                        })
                    }
                });
            }
        }
    }
</script>

<style>
    page {
        background-color: #fff;
    }
</style>
<style lang="scss" scoped>
    .cameraBox {
        display: flex;
        align-items: center;
        flex-direction: column;
        camera {
            width: 600rpx;
            height: 600rpx;
        }
        text {
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
        }
        .text1 {
            font-size: 40rpx;
            margin-top: 70rpx;
        }
        .text2 {
            font-size: 32rpx;
            margin: 24rpx 0 72rpx 0;
        }
        .text3 {
            color: #5C74FF;
            margin: 56rpx 0 24rpx 0;
        }
        .text4 {
            color: #FF0000;
            margin: 24rpx 0 72rpx 0;
        }
        &_btn {
            width: 590rpx;
            text-align: center;
            line-height: 88rpx;
            background: linear-gradient(90deg, #FF232C 0%, #FF571B 100%);
            border-radius: 44rpx 44rpx 44rpx 44rpx;
            font-size: 32rpx;
            font-weight: bold;
            color: #FFFFFF;
        }
        &_btnB {
            width: 590rpx;
            text-align: center;
            line-height: 88rpx;
            background: #FFF4F3;
            border: 2rpx solid #F30100;
            border-radius: 44rpx 44rpx 44rpx 44rpx;
            font-size: 32rpx;
            font-weight: bold;
            color: #FF0000;
            margin-bottom: 30rpx;
        }
    }
    .shibie {
        width: 600rpx;
        height: 600rpx;
    }
    .imageBox {
        width: 600rpx;
        height: 600rpx;
        position: relative;
    }
    .imageBox image:last-child {
        position: absolute;
        top: 0;
        left: 0;
    }
</style>