Heim > Web-Frontend > js-Tutorial > Das WeChat-Applet ruft die Kamera auf, um Bilder aufzunehmen

Das WeChat-Applet ruft die Kamera auf, um Bilder aufzunehmen

php中世界最好的语言
Freigeben: 2018-06-11 09:25:03
Original
14304 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen das WeChat-Applet, um die Kamera zum Aufnehmen von Bildern aufzurufen. Was sind die Vorsichtsmaßnahmen für das WeChat-Applet, um die Kamera zum Aufnehmen von Bildern aufzurufen?

Um zu verhindern, dass Benutzer Fotos im Album auswählen oder nicht in Echtzeit Fotos aufnehmen, ist die Kamera in einigen Check-in-Szenarien so eingestellt, dass sie herunterzählt und automatisch Fotos aufnimmt.

1. Die erste ist die Ansichtsebene index.wxml. Die Ansichtsebene ist hauptsächlich für die Anzeige von Komponenten und Bildern verantwortlich.

<!--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>
Nach dem Login kopieren

2. Logische Ebene index.js, Aufruf der Countdown-Funktion und Aufruf der Kamera zum Aufnehmen von Bildern und Speichern der Bilder.

//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);
}
Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung des praktischen Falls von BubbleTransition

So implementieren Sie die Datenübertragung mit vue+props

Das obige ist der detaillierte Inhalt vonDas WeChat-Applet ruft die Kamera auf, um Bilder aufzunehmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage