最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:动视网 责编:小OO 时间:2020-11-27 22:13:22
文档

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

本文实例为大家分享了微信小程序定时拍照的具体代码,供大家参考,具体内容如下:在某些进行签到的场景,为了防止用户选择相册的照片或者不实时拍照,设置相机倒计时自动拍照。一、首先是视图层index.wxml,视图层主要负责显示组件和图片。
推荐度:
导读本文实例为大家分享了微信小程序定时拍照的具体代码,供大家参考,具体内容如下:在某些进行签到的场景,为了防止用户选择相册的照片或者不实时拍照,设置相机倒计时自动拍照。一、首先是视图层index.wxml,视图层主要负责显示组件和图片。


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

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

一、首先是视图层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);
}

主要实现就是这样。

文档

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

本文实例为大家分享了微信小程序定时拍照的具体代码,供大家参考,具体内容如下:在某些进行签到的场景,为了防止用户选择相册的照片或者不实时拍照,设置相机倒计时自动拍照。一、首先是视图层index.wxml,视图层主要负责显示组件和图片。
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top