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


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 相关文章推荐
JavaScript 基本概念
Jan 20 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
Angular4 反向代理Details实践
May 30 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
Vue实现菜单切换功能
Nov 08 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 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
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
js转义字符介绍
2013/11/05 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
js简易版购物车功能
2017/06/17 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
Python 中迭代器与生成器实例详解
2017/03/29 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
Django权限设置及验证方式
2020/05/13 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
党校个人自我鉴定范文
2014/03/28 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
出国导师推荐信
2015/03/25 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书