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

此篇幅主要介绍，关于身份证取景框拍照，如何实现及实现代码，其他的银行卡取景框等等一些证件就可以照猫画虎了，使用到的组件有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-elseclass="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.windowHeightthis.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）

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

取景框图片小程序_微信小程序实现身份证取景框拍摄
本文实例为大家分享了微信小程序实现身份证取景框拍摄的具体代码,供大家参考,具体内容如下 wxml wxss .camera_box { height: 100vh; width: 100vw; pos ...
小程序实现身份证取景框拍摄
身份证取景框的实现主要是借助于camera 组件及cover-view组件先看下案例 wxml代码 <view class="camera_box"><came ...
小程序实现人脸取景框摄像-uniapp版
此篇幅主要介绍,关于人脸取景框的摄像功能,如何实现及实现代码,以及createCameraContext使用时遇到的坑,使用到的组件有camera.cover-view.cover-image 代码已 ...
取景框图片小程序_小程序实现身份证取景框拍摄
身份证取景框的实现主要是借助于camera 组件及cover-view组件先看下案例 wxml代码 js代码 Page({ /** * 页面的初始数据 */ data: { src: '', sho ...
小程序容器化：基于uni-app的iOS小程序开发
前言相信越来越多小伙伴发现不少超级APP的页面都采用小程序开发了.例如支付宝客户端,首页有一个小程序中心的入口,支付宝上很多页面都是小程序了. 图1 支付宝小程序入口第一次打开的一个新功能时,会出 ...
vue小程序开发（一） uni-app基本学习
vue小程序开发(一) uni-app基本学习脚手架搭建项目新建页面样式和sass 基本语法数据展示数据循环条件编译计算属性事件传参方式组件组件的简单使用示例组件传递参数父 ...
热门小程序拆盲盒3D特效版开发
热门小程序拆盲盒3D特效版开发功能特色/ 盲盒介绍功能模式购须知行业痛点商品定价一键回收发货管理玩法介绍流程展示模式说明抽奖模式弹幕功能支收明细用户管理背景音乐用户进行 ...
国庆头像小程序源码，带独立版后台同时可添加小程序跳转+流量主，所有改动均可后台添加+带搭建教程
微信小程序实现国旗头像,国庆个性化头像国庆头像小程序源码,带独立版后台同时可添加小程序跳转+流量主,所有改动均可后台添加+带搭建教程快去挑选一个自己喜欢的国庆头像吧,只需简单两步即可制作自己专属国 ...
微信小程序实现身份证识别功能
微信小程序实现身份证识别功能 1,首先登录小程序公众平台 2,进入设置第三方设置 3,添加ocr插件 4,添加完成后 ,需要领取免费额度,是一天100次; 链接然后就是代码编写部分首先在app. ...
Vue-Uni-App小程序实现身份证识别
Vue-Uni-App小程序实现身份证识别~ 需求:实现一个身份证的识别功能!看下方图片! 思路:(把用户上传的身份证图片转成base64请求接口发送给后端,后端返回对应的信息渲染到页面上就行了!) ...

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

期望效果

实现逻辑

具体代码如下

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

最新文章

热门文章