微信小程序实现倒计时调用相机自动拍照功能


Posted in Javascript onJune 10, 2018

本文实例为大家分享了微信小程序定时拍照的具体代码,供大家参考,具体内容如下

在某些进行签到的场景,为了防止用户选择相册的照片或者不实时拍照,设置相机倒计时自动拍照。

一、首先是视图层index.wxml,视图层主要负责显示组件和图片。

<!--index.wxml-->

 <view class="userinfo-login">
 <view class="page-body">
  <view class="page-body-wrapper">
  <view wx:if="{{src}}"></view> 
  <!-- 如果存在已经拍好的照片就不再显示调用摄像头的组件-->
  <view wx:else>
   <camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 200px;"></camera>
  <!-- 调用摄像头的组件-->
</view>
  <image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image>
  <!-- 显示拍好的照片-->
  </view>
 </view>
 </view>

二、逻辑层index.js,调用倒计时函数并且调用摄像头拍照并保存图片。

//index.js

const app = getApp()
Page({
 data: {
 userInfo: {},
 counting: false//倒计时
 },
 onLoad: function () {
 this.daojishi();//一进来就拍照倒计时
 this.ctx = wx.createCameraContext()//创建摄像头对象
 },
 //倒计时
 daojishi: function () {
 var that = this;
 if (!that.data.counting) {
  //开始倒计时5秒
  countDown(that, 5);
 }
 }
})
//倒计时函数 在page外

function countDown(that, count) {
 if (count == 0) {
 //等于0时拍照 
 that.ctx.takePhoto({
  quality: 'high',
  success: (res) => {
  that.setData({
   src: res.tempImagePath
  })
  wx.showToast({
   title: '拍照完成',
  })
  }
 })
 that.setData({
  counting: false
 })
 return;
 }
 wx.showLoading({//加载时显示倒计时
 title: '拍照倒计时'+count+'秒',
 })

 setTimeout(function () {
 wx.hideLoading()
 }, 1000)
 that.setData({
 counting: true,
 })
 setTimeout(function () {
 count--;
 countDown(that, count);
 }, 1000);
}

主要实现就是这样。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
JavaScript中对象介绍
Dec 31 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
深入浅析Vue中的Prop
Jun 10 #Javascript
vue项目部署上线遇到的问题及解决方法
Jun 10 #Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 #Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 #Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 #Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 #jQuery
JS实现区分中英文并统计字符个数的方法示例
Jun 09 #Javascript
You might like
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
javascript正则表达式总结
2016/02/29 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
详解Python 正则表达式模块
2018/11/05 Python
python基于Selenium的web自动化框架
2019/07/14 Python
解决Python二维数组赋值问题
2019/11/28 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
Hotels.com南非:酒店预订
2017/11/02 全球购物
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
工作失误检讨书范文大全
2014/01/13 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
两只小狮子教学反思
2014/02/05 职场文书
大学生安全责任书
2014/07/25 职场文书
人代会简报
2015/07/21 职场文书
给学校的建议书400字
2015/09/14 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
tomcat下部署jenkins的方法
2022/05/06 Servers