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


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 版本]
Mar 20 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
关于javascript 回调函数中变量作用域的讨论
Sep 11 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
利用jquery获取select下拉框的值
Nov 23 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
windows xp下安装pear
2006/12/02 PHP
php db类库进行数据库操作
2009/03/19 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
JQuery select标签操作代码段
2010/05/16 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
Python 实现简单的电话本功能
2015/08/09 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
Python可迭代对象操作示例
2019/05/07 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
高中国旗下的演讲稿
2014/08/28 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
生日寿星公答谢词
2015/09/29 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
正则表达式基础与常用验证表达式
2022/06/16 Javascript