微信小程序实现身份证取景框拍摄


Posted in Javascript onSeptember 09, 2020

本文实例为大家分享了微信小程序实现身份证取景框拍摄的具体代码,供大家参考,具体内容如下

wxml

<view class="camera_box">
 <camera class="camera" wx:if="{{!show}}" device-position="back" flash="off" binderror="error">
 <cover-view class="id_m">
  <cover-image class="img" src="//img.jbzj.com/file_images/article/202009/202099172501721.png"></cover-image>
 </cover-view>
 </camera>
 <image class="camera_img" src="{{src}}" wx:if="{{show}}"></image>
 <view class="action">
 <button class="takeBtn" type="primary" bindtap="takePhoto" wx:if="{{!show}}"></button>
 <button class="saveImg" type="primary" bindtap="saveImg" wx:if="{{show}}"></button>
 <button class="cancelBtn" wx:if="{{show}}" type="primary" bindtap="cancelBtn"></button>
 </view>
</view>

wxss

.camera_box {
 height: 100vh; width: 100vw;
 position: relative;
}
.camera {
 height: 85vh; width: 100vw;
 z-index: 1;
}
.id_m {
 height: 85vh; width: 100vw;
 z-index: 999;
 background: rgba(0, 0, 0, 0.1);
 display: flex;
 position: absolute;
}
.id_m .img {
 width: 550rpx;
 height: 900rpx;
 display: block;
 position: absolute;
 left: 0; right: 0; margin: auto auto;
 top: 0; bottom: 0;
}
.id_m .tips_txt {
 transform:rotate(90deg);
}
.camera_box .action {
 height: 15vh;
 position: relative;
 display: flex;
 justify-content: space-around;
 align-items: center;
} 
.camera_box .takeBtn {
 height: 120rpx; width: 120rpx; border-radius: 50%;
 font-size: 24rpx;
 background: url('https://cdn.ctoku.com/1123123123123e3241.png') no-repeat center;
 background-size: contain;
 border: none;
}
.camera_box .cancelBtn {
 font-size: 24rpx;
 height: 120rpx; width: 120rpx; border-radius: 50%;
 background: url('https://cdn.ctoku.com/12311123342312231.png') no-repeat center;
 background-size: contain;
 border: none;
}
.camera_box .saveImg {
 background: url('https://cdn.ctoku.com/1232123434231231231.png') no-repeat center;
 font-size: 24rpx;
 height: 120rpx; width: 120rpx; border-radius: 50%;
 background-size: contain;
 border: none;
}
.camera_box .takeBtn::after {
 border: none;
}

.camera_img {
 height: 85vh; width: 100%;
}

js

Page({

 /**
 * 页面的初始数据
 */
 data: {
 src: '',
 show: false
 },
 cancelBtn () {
 this.setData({show: false})
 },
 saveImg () {
 wx.showModal({
  title: '图片地址',
  content: this.data.src,
 })
 },
 takePhoto() {
 const ctx = wx.createCameraContext()
 const listener = ctx.onCameraFrame((frame) => {
  console.log(frame)
 })
 ctx.takePhoto({
  quality: 'high',
  success: (res) => {
  console.log(res)
  this.setData({
   src: res.tempImagePath,
   show: true
  })
  listener.stop({
   success: (res) => {
   console.log(res)
   },
   fail: (err) =>{
   console.log(err)
   }
  })
  },
  fail: (err) => {
  console.log(err)
  }
 })
 },
 error(e) {
 console.log(e.detail)
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 
 },

 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {
 
 },

 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {
 
 },

 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {
 
 },

 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {
 
 },

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {
 
 },

 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {
 
 },

 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {
 
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 第二代身份证号码的验证机制代码
May 12 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
javascript实现2016新年版日历
Jan 25 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 #Javascript
微信小程序实现点击生成随机验证码
Sep 09 #Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 #Javascript
vue移动端写的拖拽功能示例代码
Sep 09 #Javascript
vue路由的配置和页面切换详解
Sep 09 #Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 #Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 #Javascript
You might like
php header()函数使用说明
2008/07/10 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
python切换hosts文件代码示例
2013/12/31 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
python绘制动态曲线教程
2020/02/24 Python
flask开启多线程的具体方法
2020/08/02 Python
python实现扫雷游戏的示例
2020/10/20 Python
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
英国复古服装购物网站:Collectif
2019/10/30 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
农村党支部先进事迹
2014/01/14 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
平安工地汇报材料
2014/08/19 职场文书
开会通知
2015/04/20 职场文书
学校百日安全活动总结
2015/05/07 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
Java Socket实现多人聊天系统
2021/07/15 Java/Android
MYSQL如何查看进程和kill进程
2022/03/13 MySQL