更新记录

1.0.1（2025-04-10） 下载此版本

修改插件标题

1.0.0（2025-04-10） 下载此版本

第一个版本

平台兼容性

y-custom-camera

组件介绍

本插件是一个可以自定义相机的组件，可以实现身份证取景位置对比，图片水印相机等功能

组件文档

watermarkImage属性说明

事件

完整示例

<template>
    <view class="content">
        <view class="container">
            <y-custom-camera 
                ref="customCamera" 
                :cameraConfig="cameraConfig"
                :watermarkImage="watermarkImage"
            ></y-custom-camera>         
        </view>

        <view class="takebtn">
            <view @click="takePhoto" class="btn">
                <text>拍照</text>
            </view>
        </view>
        <view class="tips">拍照结果：</view>
        <view class="takeimage">
            <image :src="image_url" :style="{width: cameraConfig.width+'rpx', height: cameraConfig.height+'rpx'}"></image>
        </view>
    </view>
</template>

<script setup>
    import { ref } from 'vue';
    const customCamera = ref();
    // 相机大小
    const cameraConfig = ref({
        width: 700,
        height: 500
    });
    // 水印图片配置，必填
    const watermarkImage = ref({
        url: '图片地址（cdn地址或临时地址）',
        width: 375,
        height: 250,
        top: 50,
        left: 50,
    });
    // 拍照结果图片
    const image_url = ref('');

    // 返回拍照后的图片路径
    const takePhoto = async () => {
        try{
            const res = await customCamera.value.takePhoto();
            console.log('拍照结果',res);
            image_url.value = res.image_url;
        }catch(err){
            console.log("err=>",err);
        }
    }
</script>

<style lang="scss" scoped>
    .container{
        display: flex;
        justify-content: center;
        margin-top: 50rpx;
    }
    .takebtn {
        margin-top: 50rpx;
        display: flex;
        justify-content: center;
        .btn {
            background-color: #ddd;
            border-radius: 10rpx;
            width: 160rpx;
            height: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .tips{
        text-align: center;
        font-size: 48rpx;
        margin: 20rpx;
        color: red;
    }
    .takeimage{
        display: flex;
        justify-content: center;
    }
</style>