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


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 相关文章推荐
javascript使用activex控件的代码
Jan 27 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
JavaScript类的继承多种实现方法
May 30 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 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
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
php上传excel表格并获取数据
2017/04/27 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
QQ登录简单实现代码
2021/03/09 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
js对象基础实例分析
2015/01/13 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
理想高通滤波实现Python opencv示例
2019/01/30 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
机械制造与自动化应届生求职信
2013/11/16 职场文书
外贸实习生自荐信范文
2013/11/24 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
孩子教育的心得体会
2014/09/01 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
道歉信范文
2015/05/12 职场文书
换届选举主持词
2015/07/03 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书