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


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来实现动画导航效果的代码
Dec 16 Javascript
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
JavaScript中常见陷阱小结
Apr 27 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
一个简洁的PHP可逆加密函数(分享)
2013/06/06 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
python 测试实现方法
2008/12/24 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
python 内置函数汇总详解
2019/09/16 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
新年联欢会主持词
2014/03/27 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
标准版离职证明书
2014/09/12 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
《窃读记》教学反思
2016/02/18 职场文书
个人售房合同协议书
2016/03/21 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS