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


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 tab标签页的制作
May 10 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
JavaScript将字符串转换成字符编码列表的方法
Mar 19 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 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 字符串 小常识
2009/06/05 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
深入解析Python中的集合类型操作符
2015/08/19 Python
Python解析树及树的遍历
2016/02/03 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
Python操作mongodb的9个步骤
2018/06/04 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
python async with和async for的使用
2019/06/20 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
工厂总经理岗位职责
2014/02/07 职场文书
红旗方阵解说词
2014/02/12 职场文书
会计主管岗位职责
2015/04/02 职场文书
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python