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

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.22

Installation und Konfiguration von MySQL8.0.22 (s...

Der gesamte Prozess der lokalen Konfiguration des Reverse-Proxys über Nginx

Vorwort Nginx ist ein leichtgewichtiger HTTP-Serv...

Erkennung und Lösung von Vue.$set-Fehlerfallen

Ich habe zufällig festgestellt, dass Vue.$set im ...

Docker-Bindung mit fester IP/Hostübergreifender Container-Gegenzugriffsvorgang

Vorwort Bisher waren statische IPs, die über Pipe...

Zwei Methoden zur Implementierung der Mysql-Remoteverbindungskonfiguration

Zwei Methoden zur Implementierung der Mysql-Remot...

Detaillierte Erklärung zur Verwendung von Scoped Slots in Vue.js-Slots

Inhaltsverzeichnis Keine Slots Vue2.x-Steckplätze...

Funktionen in TypeScript

Inhaltsverzeichnis 1. Funktionsdefinition 1.1 Fun...

MySQL 8.0 kann jetzt JSON verarbeiten

Inhaltsverzeichnis 1. Kurzübersicht 2. JSON-Grund...

Zusammenfassung der Unterschiede zwischen SQL und NoSQL

Hauptunterschiede: 1. Typ SQL-Datenbanken werden ...

Erweiterte benutzerdefinierte JavaScript-Ausnahme

Inhaltsverzeichnis 1. Konzept 1.1 Was sind Fehler...

So gehen Sie mit verstümmelten Zeichen in der MySQL-Datenbank um

In MySQL können in der Datenbank fehlerhafte Zeic...

Der Unterschied zwischen clientWidth, offsetWidth, scrollWidth in JavaScript

1. Konzept Sie alle sind Attribute des Elements u...