uni-app实现小程序身份证取景框

<template><view class=""><view class="container"><view class="text">请将<span style='margin: 0;'>{{idcardFrontSide == 1?'人像':'国徽'}} </span>面放到框内,确保  <span> 1.边角完整 2.文字清晰 </span></view><cameraid="camera"mode="normal" device-position="back" flash="off"  :style="{height:cameraHeight + 'px',width:cameraWidth+'px!important'}"><cover-view class="controls" style="width: 100%;height: 100%;"><cover-image src="/static/img/sfz.png" /> </cover-view></camera><view @click="takePhoto" class="photoConfirm"><view class=""> </view></view></view><view style="opacity:0;position:fixed;left:100%"> //设置样式不让画布显示到页面可视区域<canvas canvas-id="myCanvas" ></canvas></view></view>
</template>

/static/img/sfz.png 是一个透明背景的图片,只用了一个,用文字判断是那一面,

也可以用不同的图片,在代码里写两个<cover-image src="图片路径" /> 根据类型判断显示哪个

<script>
export default {data() {return {cameraHeight:0,cameraWidth:0,cameraContext: null,idcardFrontSide: 1,}},onLoad(options) {//获取上一个页面身份证正反面类型的参数this.idcardFrontSide = options.typeif(uni.createCameraContext) {this.cameraContext = uni.createCameraContext()}else {uni.showModal({title: '提示',content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'})}let systemInfo = uni.getSystemInfoSync()this.cameraWidth = systemInfo.windowWidth - 30//根据取景框图片的比例算出camer的宽高this.cameraHeight = 285*(systemInfo.windowWidth - 30)/414},methods: {takePhoto(){const ctx2 =uni.createCanvasContext('myCanvas')this.cameraContext.takePhoto({quality: 'high',success:async (res)=>{ const that = thisif(ctx2){uni.getImageInfo({src:res.tempImagePath,success: function(image) {//截取图片指定部分并绘制到canvasctx2.drawImage(image.path,  0, 0, image.width , image.height)//将canvas内容保存为图片ctx2.draw(false, uni.canvasToTempFilePath({canvasId: 'myCanvas',width: image.width,height: image.height,fileType: 'png',success: async (res) => {const imgPath = String(res.tempFilePath)//封装的请求方法let response = await that.$uploadFile(`接口`, '参数', );let result = JSON.parse(response)if(result.code != 200) {that.$util.msg(result.msg);return false;}else{//这里用的从上一页点击拍摄的时候进入该页面,上传成功后返回上一页并回传值if(that.idcardFrontSide == 1) {that.$util.prePage().sfzObj.idcard = result.idCard; that.$util.prePage().sfzObj.name = result.name; }that.$util.prePage().sfzObj.url = result.url;uni.navigateBack();}},fail: (res) => {console.log(res)}},that) )}})}    },fail: (err) => {uni.showToast({title:'拍照失败，请检查系统是否授权',icon: 'none',duration: 1200})}})},}
}
</script>

<style scoped lang="less">.container{position: absolute; top: 50%; left:50%;-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);.text{text-align: center;color: #ff0000;margin: 20rpx 0;  margin: 20rpx 0; font-size: 26rpx; font-weight: bold;span{color: #0062CC;margin-left: 10rpx;display: inline-block;font-size: 28rpx; }}}.photoConfirm{margin: 40rpx auto;width: 60px;height: 60px;border-radius: 50%;border: 6px solid #5996cc;color: #7b6f6f;}.photoConfirm>view{width: 36px;height: 36px;border-radius: 50%;border: 5px solid #5996cc;position: relative;top: 50%;left: 50%;margin-left: -18px;margin-top: -18px;}
</style>

最终效果:如下图

看了好多大佬的文章才最终完成整个画图绘制canvas,可以直接从跳转拍摄带回后台返回数据返回到上一个拍摄页面

uni-app实现小程序身份证取景框相关推荐

uni App 支付宝小程序分享代码
封装获取当前页面的路由信息 export function getCurrentPath() {let currentRoutes = getCurrentPages(); // 获取当前打开过的页面 ...
实现uniapp的app和小程序开发中能使用axios进行跨域网络请求，并支持携带cookie
实现uniapp的app和小程序开发中能使用axios进行跨域网络请求,并支持携带cookie 1-使用npm install axios;命令安装axios 2-新建一个文件夹再建一个.js后缀文件 ...
uniapp 公众号打开小程序，app打开小程序，小程序打开其他小程序
(公众号打开小程序) 第一步->进入项目目录: npm install jweixin-module --save 第二步->在要调用得页面里面 import jweixin from ' ...
视频教程-uni-app实战商城类app和小程序-Webapp
uni-app实战商城类app和小程序帝莎学院创始人&CEO,目前主要从事全栈开发.Python.PHP.小程序.App.Web等技术的研究和开发.专注于实战类教程,授课风趣幽默,讲解条理清 ...
uniapp多端分享（app，小程序，公众号）
前言开发uniapp程序的项目,用它生成多端应用,由于兼容各种多端应用,程序代码需要相应的适配,在项目里分享功能是很常见的一个功能,但是在不同的端有不同的方法,我们如何实现多端分享呢?(app,小程 ...
Android开发之APP唤醒小程序,打开小程序,调起小程序以及传参数的实现方法(附加源码)
老套路咱们先看效果图: 可以先看下官方文档介绍:微信官方文档APP打开小程序链接我这边打开了,上面奔溃是因为模拟器不兼容的原因: 主要讲解下打开小程序核心代码: // 填应用AppIdString ...
很多人花一大笔钱做APP、小程序
很多人花一大笔钱做APP.小程序, 是纯粹为了做这个东西而做这个东西, 也就是说他们只是觉得需要这个东西, 但为什么需要? 如何使它发挥最大的价值? 其实他们心里并没有一个很清晰的概念. 而且事实上A ...
h5打开app_移动端产品比较分析：APP、小程序、H5
本文笔者从实际工作经验出发,结合参考相关文章,对移动端产品(APP.小程序.H5)从13个方面进行了比较分析,与大家分享. 移动端产品包括小程序(本文特指微信小程序).APP(安卓.IOS).H5页面 ...
App、小程序、H5，这三者该如何抉择？
无论是大公司还是创业小公司,都会面临先做App.小程序还是H5的困境,还有公司是所有终端都一起做. 对于大公司来说可以同步进行一起开发,但对于小公司来说就未必有那么多人力和精力一起去完成了.那他们彼此 ...
iOS App跟小程序之间跳转
移动应用拉起小程序是指用户可以通过接入该功能的第三方移动应用(APP)跳转至某一微信小程序的指定页面,完成服务后跳回至原移动应用(APP). App和小程序互相跳转: 1)App主动发起小程序卡片分享 ...

uni-app实现小程序身份证取景框

uni-app实现小程序身份证取景框相关推荐

最新文章

热门文章