【camera】uniapp小程序实现取景框拍摄（拍照时屏幕有引导内容）

原创

已于 2023-11-13 10:38:03 修改 · 3.4k 阅读

收录于

当前文章被以下社区和专栏收录：

于 2023-11-04 18:33:55 首次发布

本文介绍了在微信小程序中如何使用camera组件和cover-view、cover-image等实现身份证取景框拍照功能，包括代码示例和扩展至相册选取功能的思路。

文章目录

前言
一、实现方法

前言

想要实现的效果图如下：
在这里插入图片描述

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

一、实现方法

提示：关于身份证取景框拍照，如何实现及实现代码，其他的银行卡取景框等等一些证件就可以参考，使用到的组件有camera、cover-view、cover-image。把相机拍摄的效果当作一个独立的页面进行处理。

代码：

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