小程序实现身份证取景框拍摄-uniapp版

淩亂°似流年 2023-01-11 08:52 465阅读 0赞

> 此篇幅主要介绍，关于身份证取景框拍照，如何实现及实现代码，其他的银行卡取景框等等一些证件就可以照猫画虎了，使用到的组件有camera、cover-view、cover-image

代码已开源 [uniapp-componentshttps://github.com/wz930206/uniapp-components![icon-default.png?t=L9C2][icon-default.png_t_L9C2]https://github.com/wz930206/uniapp-components][uniapp-componentshttps_github.com_wz930206_uniapp-components_icon-default.png_t_L9C2_icon-default.png_t_L9C2_https_github.com_wz930206_uniapp-components]

### 期望效果 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70 1][]

### 实现逻辑 ###

首先是当做一个页面而不是组件，需要在pages.json中注册（作为组件时有各种坑，目前还没爬出来）

接下来就是要劳烦UI小姐姐的地方了，作图和切图

最后就是处理对拍出来的照片进行旋转展示了（style="\{transform:rotateZ(270deg)\}"）

### 具体代码如下 ###

<template>
    	<view class="cover-img" :style="{height: windowHeight + 'px'}">
    		<camera 
    			mode="normal" 
    			device-position="back" 
    			flash="off"  
    			:style="{height:cameraHeight + 'px'}"
    			>
    			<cover-view class="controls" style="width: 100%;height: 100%;">
    				
    				<cover-image 
    					v-if="idcardFrontSide === 'front'" 
    					class="icon-w569-h828"
    					src="https://img-blog.csdnimg.cn/20210126144225906.png" 
    				/>
    				
    				<cover-image 
    					v-else
    					class="icon-w569-h828"
    					src="https://img-blog.csdnimg.cn/20210126144317636.png" 
    			    />
    			</cover-view>
    		</camera>
    		<view class="bottom font-36-fff">
    			<view class="wrap">
    				<view class="back" @click="back">取消</view>
    				<view @click="takePhoto">
    					<image 
                          class="icon-w131-h131"     
                          src="/static/images/index/take_camera_btn_icon.png">
                        </image>
    				</view>
    				<view @click="chooseImage">
    					相册
    				</view>
    			</view>
    		</view>
    	</view>
    </template>

<script>
        data() {
    		return {
    			cameraContext: {}	
    		};
    	},
        onLoad(options) {
    	    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
        },
        methods: {
            // 拍照
    		takePhoto() {
    			uni.showLoading({
    				title:'上传中，请稍候'
    			})
    			this.cameraContext.takePhoto({
    				quality: 'normal',
    				success: (res) => {},
    				fail: (err) => {
    					uni.showToast({
    						title:'拍照失败，请检查系统是否授权',
    						icon: 'none',
    						duration: 1200
    					})
    				}
    			})
    		},
            // 从相册选取
    		chooseImage() {
    			uni.chooseImage({
    				count: 1,
    				sizeType: ['original', 'compressed'],
    				sourceType: ['album'],
    				success: (res) =>  {},
    				fail: (err) => {}
    			});
    		},
        }
    </script>

<style lang="less" scoped>
    .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 {
    		display: flex;
    		align-items: center;
    		justify-content: space-between;
    		height: 80px;
    		padding: 0 73rpx;
    	}
    }
    </style>

有什么问题的可以评论交流。

感觉有用的或者帮助到你的可以收藏、点赞、关注 一键三连。

（有问题需要交流可以加WX:zz245602951）

[icon-default.png_t_L9C2]: https://csdnimg.cn/release/blog_editor_html/release1.9.2/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=L9C2
[uniapp-componentshttps_github.com_wz930206_uniapp-components_icon-default.png_t_L9C2_icon-default.png_t_L9C2_https_github.com_wz930206_uniapp-components]: https://github.com/wz930206/uniapp-components
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2021012612013590.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2NvbWluZw_size_16_color_FFFFFF_t_70 1]: /images/20221119/7ab80bee6aa440eba2600ad09d8b45be.png

发表评论取消回复

表情：

评论列表（有 0 条评论，465人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp小程序实现微信小程序自带的分享功能

可以使用 uni.showModal() 和 uni.showActionSheet() 方法来实现微信小程序自带的分享功能。 1. 使用 uni.showModal()

亦凉/ 2023年10月08日 19:58/ 0 赞/ 31 阅读

相关小程序实现人脸取景框摄像-uniapp版

> 此篇幅主要介绍，关于人脸取景框的摄像功能，如何实现及实现代码，以及createCameraContext使用时遇到的坑，使用到的组件有camera、cover-view、c

朴灿烈づ我的快乐病毒、/ 2023年01月11日 09:07/ 0 赞/ 270 阅读

相关小程序实现身份证取景框拍摄-uniapp版

> 此篇幅主要介绍，关于身份证取景框拍照，如何实现及实现代码，其他的银行卡取景框等等一些证件就可以照猫画虎了，使用到的组件有camera、cover-view、cover-im

淩亂°似流年/ 2023年01月11日 08:52/ 0 赞/ 466 阅读

相关 uniapp实现微信小程序登录功能

第一步我们先把页面画出来 <template>  <view v-if="isCan

系统管理员/ 2022年12月29日 14:25/ 0 赞/ 241 阅读

相关 uniapp 小程序打包发布

1、在项目的manifest.json中选择小程序,配置AppID ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

怼烎@/ 2022年12月15日 12:41/ 0 赞/ 368 阅读

相关微信小程序轮子 - 调起摄像头拍摄照片并获取照片路径（可用于拍摄身份证 / 人像等等）

效果图 > 如果你需要现成的轮子，可以看看这个：[调起摄像头拍照并在页面预览（身份证拍照 / 人像拍照等等）][Link 1] `蓝色线框` / `橘黄色文字` 都可以

╰+哭是因爲堅強的太久メ/ 2022年11月27日 09:00/ 0 赞/ 448 阅读

相关 Uniapp实现微信小程序云开发

开通云开发 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

向右看齐/ 2022年05月01日 12:58/ 0 赞/ 769 阅读

相关 uniapp 小程序echarts 使用

1.创建一个文件夹 npm init 2.下载类库 npm install echarts mpvue-echarts --save 3.将这三个文件夹复制粘贴

冷不防/ 2021年09月18日 11:50/ 0 赞/ 1031 阅读

相关小程序(uniapp)-实现分页功能

需求 `数据太多，一下加载不过来，所以需要触底再加载数据。数据加载中，提示加载中；数据加载完毕，提示没有数据` 大致思路分页(触发)时机利用

古城微笑少年丶/ 2021年08月31日 08:18/ 0 赞/ 920 阅读

相关 uniapp 小程序打包发布

1、在项目的manifest.json中选择小程序,配置AppID 2、在微信小程序后台配置线上合法域名 ![在这里插入图片描述][watermark_type_Z

客官°小女子只卖身不卖艺/ 2021年07月24日 11:10/ 0 赞/ 804 阅读