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

最新推荐文章于 2024-09-25 10:38:35 发布

ur home

最新推荐文章于 2024-09-25 10:38:35 发布

阅读量8k

点赞数 14

分类专栏： uniapp 文章标签：小程序 uni-app

本文链接：https://blog.csdn.net/wz_coming/article/details/113177177

版权

uniapp 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

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

代码已开源 uniapp-componentshttps://github.com/wz930206/uniapp-componentshttps://github.com/wz930206/uniapp-components

期望效果

实现逻辑

首先是当做一个页面而不是组件，需要在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）