# 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()  |

## 完整示例

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