WeChat applet implements countdown to call the camera’s automatic photo taking function

This article mainly introduces the WeChat applet in detail to realize the countdown call function of the camera to automatically take pictures. It has certain reference value. Interested friends can refer to it.

The examples in this article are shared with you. The specific code for taking photos regularly in the WeChat applet is for your reference. The specific content is as follows

In some check-in scenarios, in order to prevent users from selecting photos in the album or not taking photos in real time, set the camera countdown to automatically take photos.

1. The first is the view layer index.wxml. The view layer is mainly responsible for displaying components and pictures.

<!--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>

2. Logical layer index.js, calls the countdown function and calls the camera to take pictures and save the pictures.

//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);
}

The main implementation is like this.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

WeChat Mini Program Movie Review Mini Program Production

WeChat Mini Program Internet Request Wheel Picture broadcast

WeChat applet dynamically displays the effect of project countdown

##

The above is the detailed content of WeChat applet implements countdown to call the camera’s automatic photo taking function. For more information, please follow other related articles on the PHP Chinese website!