Das WeChat-Applet ermöglicht das Aufnehmen von Fotos und Auswählen von Bildern aus Alben

Das WeChat-Applet ermöglicht das Aufnehmen von Fotos und Auswählen von Bildern aus Alben

In diesem Artikel wird der spezifische Code für das WeChat-Applet beschrieben, mit dem Sie Fotos aufnehmen und Bilder aus Alben als Referenz auswählen können. Der spezifische Inhalt ist wie folgt

Layout:

<!--pages/Kamera/Kamera.wxml-->
<Ansicht 
Klasse = "tui-menu-list" 
id="Ansicht1" 
Stil="Anzeige:flex;flex-direction:space-between">
 <Schaltfläche 
  id="b1" 
  Größe="mini"
  Typ="primär" 
  bindtap="Bild auswählen">
  Bild abrufen</button>
 <Schaltfläche 
  id="b2" 
  Größe="mini"
  Typ="primär"
  bindtap="Telefon speichern">
  Speichern</button>
</Ansicht>
<Bild
  src="{{tempFilePaths}}" 
  catchtap="Bildtap auswählen"
  Modus="AspektAnpassen" 
  Stil="Breite:100%;Höhe:400px;Hintergrundfarbe:#ffffff;">
</image>

Stil:

/* Seiten/Kamera/Kamera.wxss */
 
.ansicht1 {
  Höhe: 25px
}
 
.tui-menu-list {
  Anzeige: Flex;
  Flex-Richtung: Reihe;
  Rand: 20 Rpx;
  Polsterung: 20rpx;
}

Bildpfad ermitteln, Bild anzeigen und speichern

// Seiten/Kamera/Kamera.js
Seite({
 
  Daten: {
    tempFilePaths: „http://pic2.cxtuku.com/00/01/08/b207004f7104.jpg“
  },
  Bild auswählen: Funktion () {
    var das = dies;
    wx.showActionSheet({
      itemList: ['Aus Album auswählen', 'Foto aufnehmen'],
      Artikelfarbe: "#CED63A",
      Erfolg: Funktion (res) {
        wenn (!res.abbrechen) {
          wenn (res.tapIndex == 0) {
            das.wähleWxImage('Album')
          } sonst wenn (res.tapIndex == 1) {
            das.wähleWxImage('Kamera')
          }
        }
      }
    })
  },
 
  chooseWxImage: Funktion (Typ) {
    var das = dies
    wx.wählenBild({
      Größentyp: ['Original', 'komprimiert'],
      Quelltyp: [Typ],
      Anzahl: 1,
      Erfolg: Funktion (res) {
        Konsole.log(res)
        dass.setData({
          tempFilePaths: res.tempFilePaths[0],
        })
      }
    })
  },
  Telefonspeicher: Funktion () {
    wx.getImageInfo({
      Quelle: this.data.tempFilePaths,
      Erfolg: Funktion (res) {
        var Pfad = res.Pfad
        wx.saveImageToPhotosAlbum({
          filePath: Pfad,
          Erfolg: Funktion () {
            wx.showToast({
              Titel: 'Erfolgreich gespeichert',
            })
          },
          Fehler: Funktion (Res) {
            wx.showToast({
              Titel: 'Speichern fehlgeschlagen',
              Symbol: „keine“
            })
          }
        })
      }
    })
  }
})

Effektbild:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Das WeChat-Applet verwendet die Frontkamera zum Aufnehmen von Fotos
  • Das WeChat-Applet nimmt ein Foto auf oder wählt ein Bild aus dem Album aus, um es hochzuladen – Codebeispiel
  • Das WeChat-Applet realisiert die Generierung von Bildern im angegebenen Bereich der Kameraleinwand
  • Beispiel für die Implementierung der Foto- und Videofunktionen des WeChat-Miniprogramms
  • So verwenden Sie das WeChat-Applet „chooseImage“ (wählen Sie ein Bild aus dem lokalen Album aus oder machen Sie ein Foto mit der Kamera)
  • Das WeChat-Applet ruft die versteckte Fotofunktion der Kamera auf
  • Das WeChat-Applet implementiert einen Countdown, um die Kamera zum automatischen Aufnehmen von Bildern aufzurufen
  • Das WeChat-Applet chooseImage wählt ein Bild aus oder macht ein Foto
  • WeChat Mini-Programm - Machen Sie ein Foto oder wählen Sie ein Bild aus und laden Sie eine Datei hoch
  • Das WeChat-Applet realisiert die Fotoaufnahmefunktion

<<:  So passen Sie geplante AT- und Cron-Aufgaben in Linux an

>>:  Detaillierte Erklärung der Funktionen outfile, dumpfile und load_file bei der MySQL-Injektion

Artikel empfehlen

Tutorial-Diagramm zur Installation von Zabbix2.4 unter Centos6.5

Die feste IP-Adresse des Centos-DVD1-Versionssyst...

Einführung in Spark und Vergleich mit Hadoop

Inhaltsverzeichnis 1. Spark vs. Hadoop 1.1 Nachte...

Pygame-Code zum Erstellen eines Schlangenspiels

Inhaltsverzeichnis Verwendete Pygame-Funktionen E...

Eigenschaften und Quellcode der Echarts-Legendenkomponente

Die Legendenkomponente ist eine häufig verwendete...

CSS-Code zur Unterscheidung von IE8/IE9/IE10/IE11 Chrome Firefox

Das Debuggen der Website-Kompatibilität ist wirkl...

Beispiele für Vorschaufunktionen für verschiedene Dateitypen in vue3

Inhaltsverzeichnis Vorwort 1. Vorschau der Office...

Praktische Methode zum Löschen einer Zeile in einer MySql-Tabelle

Zunächst müssen Sie bestimmen, welche Felder oder...

Vollständige Schritte zur Deinstallation der MySQL-Datenbank

Der Vorgang zur vollständigen Deinstallation der ...