[камера] Апплет uniapp реализует съемку с помощью видоискателя (при съемке на экране появляется подсказка)

---

Предисловие

---

Диаграмма эффекта, которого вы хотите достичь, выглядит следующим образом:

提示：以下是本篇文章正文内容，下面案例可供参考

1. Способ реализации

Советы: Что касается рамки видоискателя удостоверения личности для фотографирования, способа ее реализации и кода, вы можете обратиться к другим рамкам видоискателя банковской карты и другим документам.Используемые компоненты: камера, обложка, обложка. Рассматривайте эффекты, снятые камерой, как независимую страницу.

Код:

<template>
	<view>
	<!-- 这是自己写的页头组件，可以自己写 -->
	<wTitleBar :isReturn="true" title="拍摄身份证" textAlign='center' textColor="#FFFFFF;" bg-color="#1E1D23" :returnColor='rt'></wTitleBar>
	<view class="cover-img" :style="{height: windowHeight + 'px'}">
		<camera mode="normal" device-position="back" flash="off" :style="{height:79 + 'vh'}">
			<cover-view class="controls" style="width: 100%;height: 100%;">
				<!-- 头像面图片 -->
				<cover-image v-if="idcardFrontSide === 'front'" class="icon-w569-h828"
					src="/static/images/pageHome/renxiang2.png" />
				<!-- 国徽面图片 -->
				<cover-image v-else class="icon-w569-h828" src="/static/images/pageHome/guohui2.png" />
			</cover-view>
		</camera>
		<view class="bottom font-36-fff">
			<view class="wrap">
				<!-- 拍摄按钮 -->
				<image class="icon-w131-h131" src="/static/images/approved/camera.png" @click="takePhoto"></image>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import wTitleBar from '@/components/w-titleBar/w-titleBar.vue'
	export default {
    
    
		 data() {
    
    
		        return {
    
    
					rt: 0,
					idcardFrontSide: '',
		            cameraContext: {
    
    }    
		        };
		    },
		    onLoad(options) {
    
    
				this.idcardFrontSide = options.idcardFrontSide
		        if(uni.createCameraContext) {
    
    
		            this.cameraContext = uni.createCameraContext()
		        }else {
    
    
		            // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
		            uni.showModal({
    
    
		                title: '提示',
		                content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
		            })
		        }
		    },
		    created() {
    
    
		        let systemInfo = uni.getSystemInfoSync()
		        this.windowHeight = systemInfo.windowHeight
		        this.cameraHeight = systemInfo.windowHeight - 80
		    },
			components: {
    
    
				wTitleBar
			},
		    methods: {
    
    
		        // 拍照
		        takePhoto() {
    
    
		            this.cameraContext.takePhoto({
    
    
		                quality: 'normal',
		                success: (res) => {
    
    
		               		 <!-- 拍摄正面后回传参数给上一页面 -->
							if (this.idcardFrontSide === 'front') {
    
    
								uni.$emit("file", {
    
    
									filePath: res.tempImagePath,
									fileType: 0
								})
							} else {
    
    
							 <!-- 拍摄反面面后回传参数给上一页面 -->
								uni.$emit("file", {
    
    
									filePath: res.tempImagePath,
									fileType: 1
								})
							}
							 <!-- 拍摄后返回上一页面 -->
							uni.navigateBack({
    
    delta:1})
						},
		                fail: (err) => {
    
    
		                    uni.showToast({
    
    
		                        title:'拍照失败，请检查系统是否授权',
		                        icon: 'none',
		                        duration: 1200
		                    })
		                }
		            })
		        },
		    },
			}
</script>


<style  scoped>
	.icon-w131-h131{
    
    
		width: 120rpx;
		height: 120rpx;
		
	}
.icon-w569-h828 {
    
    
    width: 569rpx;
    height: 828rpx;
}
.controls {
    
    
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bottom {
    
    
    width: 100%;
    background-color: #000;
   
}
 .wrap {
    
    
    text-align: center;
	padding-top: 10rpx;
    }
</style>

Вы можете продолжать расширять его самостоятельно (функция выбора альбома ----> Идея реализации: Разместить кнопку в правом нижнем углу страницы съемки相册, нажать метод возвращает путь к изображению)相册 Triggeruni.chooseImage()