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


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 apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
js简单倒计时实现代码
Apr 30 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
关于vue面试题汇总
Mar 20 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 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指定函数参数默认值示例代码
2013/12/04 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
Prototype String对象 学习
2009/07/19 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
用python实现的线程池实例代码
2018/01/06 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
您的网上新华书店:文轩网
2016/08/24 全球购物
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
Linux机考试题
2015/10/16 面试题
《理想》教学反思
2014/02/17 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
上党课的心得体会
2014/09/02 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
2014年度工作总结报告
2014/12/15 职场文书
华山导游词
2015/02/03 职场文书
英文导游词
2015/02/13 职场文书