L'applet WeChat appelle la caméra pour prendre des photos

Cette fois, je vais vous apporter l'applet WeChat pour appeler la caméra pour prendre des photos. Quelles sont les précautions à prendre pour que l'applet WeChat appelle la caméra pour prendre des photos ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

Dans certains scénarios d'enregistrement, afin d'empêcher les utilisateurs de sélectionner des photos dans l'album ou de ne pas prendre de photos en temps réel, l'appareil photo est configuré pour compter à rebours et prendre automatiquement des photos.

1. La première est la couche de vue index.wxml. La couche de vue est principalement responsable de l'affichage des composants et des images.

<!--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. Couche logique index.js, appelant la fonction de compte à rebours et appelant l'appareil photo pour prendre des photos et enregistrer les images.

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée du cas pratique BubbleTransition

Comment implémenter le transfert de données avec vue+props

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!