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


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 相关文章推荐
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
ES6 Promise对象的含义和基本用法分析
Jun 14 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
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
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
PHP的拦截器实例分析
2014/11/03 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
教师个人鉴定材料
2014/02/08 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
回复函格式及范文
2015/07/14 职场文书
Java使用JMeter进行高并发测试
2021/11/23 Java/Android