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


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 相关文章推荐
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
angular实现商品筛选功能
Feb 01 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 Javascript
深入浅析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 for 循环语句使用方法详细说明
2010/05/09 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
PHP链表操作简单示例
2016/10/15 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
ExtJS下grid的一些属性说明
2009/12/13 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
利用原生JS实现data方法示例代码
2019/05/28 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
Python中文字符串截取问题
2015/06/15 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
法律工作求职自荐信
2013/10/31 职场文书
药剂专业自荐书
2014/06/20 职场文书
洗手间标语
2014/06/23 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL