supervision-uniapp/uni_modules/y-custom-camera

y-custom-camera

组件介绍

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

组件文档

属性名	类型	必传	默认值	说明
cameraConfig	Object	false	{width: 700, height: 500}	相机取景框宽高（最后拍照呈现的照片宽高），单位rpx。
watermarkImage	Object	true	{url: '',width: 50,height: 50,top: 0,left: 0}	水印图片配置，完整介绍见下方“watermarkImage属性说明”
printWatermark	Boolean	false	true	拍照结果是否打印水印图片
autoPreview	Boolean	false	true	拍照后是否打开预览
flash	auto、on、off,、torch	false	off	闪光灯控制，auto自动、on打开、off关闭、torch常亮
outputDimension	360P、540P、720P、1080P、max	false	1080p	相机拍照，录制的分辨率。有效值为 360P、540P、720P、1080P、max。

watermarkImage属性说明

属性值	参数类型	默认值参数	必填	说明
url	String		true	水印图片地址（cdn或临时路径）
width	Number	50	true	水印图片宽度，单位rpx。
height	Number	50	true	水印图片高度，单位rpx。
top	Number	50	true	水印图片与相机取景框顶部的距离，单位rpx。
left	Number	50	true	水印图片与相机取景框左边的距离，单位rpx。

事件

事件名	返回值类型	说明
takePhoto	Promise	拍照事件，在外部使用的页面通过ref调用该组件的takePhoto 方法。如vue3中使用: customCamera.value?. takePhoto()

完整示例

<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>