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

Codebeispiele für den Import und Export von Docker-Images

Import und Export von Docker-Images Dieser Artike...

Interpretation des Moduls zum Lastenausgleich mit nginx

Inhaltsverzeichnis Zwei Module zur Verwendung von...

MySQL-Installationsinformationen unter Linux-Server anzeigen

Sehen Sie sich die Installationsinformationen von...

Typische Fälle von MySQL-Indexfehlern

Inhaltsverzeichnis Typische Fälle Anhang: Häufige...

Natives JS zum Erzielen eines Schiebeknopfeffekts

Der spezifische Code des mit Js erstellten Schieb...

Vue.js implementiert ein einfaches Faltpanel

In diesem Artikelbeispiel wird der spezifische Co...

Vue implementiert rekursiv ein dreistufiges Menü

In diesem Artikelbeispiel wird der spezifische Co...

Vue-Elternkomponente ruft Funktionsimplementierung der Unterkomponente auf

Die übergeordnete Vue-Komponente ruft die Funktio...

Linux verwendet die suid vim.basic-Datei, um eine Rechteausweitung zu erreichen

Auf Kali reproduzieren Legen Sie zunächst die Sui...

Vue implementiert unregelmäßige Screenshots

Inhaltsverzeichnis Bilderfassung durch SVG CSS-Te...

Implementierung des CSS-Ladeeffekts Pac-Man

emmm, der Name ist nur eine zufällige Vermutung 2...

Vue implementiert Klick-Feedback-Anweisungen für den Wasserwelleneffekt

Inhaltsverzeichnis Wasserwelleneffekt Sehen wir u...