Vue ruft die PC-Kamera auf, um die Fotofunktion zu realisieren

<Vorlage>
  <div Klasse="Kamera-Box">
    <video id="video" :width="videoBreite" :height="videoHöhe" v-show="!imgSrc"></video>
    <canvas id="canvas" :width="videoBreite" :height="videoHöhe" v-show="imgSrc"></canvas>
    <p class="camera-p">{{!imgSrc?'Tipp: Bitte zentrieren Sie den Avatar und drücken Sie zur Bestätigung die Schaltfläche "Foto"':''}}</p>
    <el-button type="primary" @click="setImage" v-if="!imgSrc" class="camera-btn">Machen Sie ein Foto</el-button>
    <el-button type="primary" v-if="imgSrc" @click="setFileUpload" class="camera-btn">Hochladen</el-button>
  </div>
</Vorlage>

<Skript>
  importiere {setFileUpload, deleteFileUpload, addUserCard } aus "@/api/houseApi";

  Standard exportieren {
    Name: 'Kamera',
    Requisiten: {
      //【Erforderlich】CameraDialog-Popup-Fenster zeigt den Status an: {Typ: Boolean},
      //[Optional] Verwenden Sie native Eingabe für den lokalen Upload zum Löschen, wenn Sie deleteData ersetzen: {type: Object}
    },
    Daten() {
      zurückkehren {
        Videobreite: '401',
        Videohöhe: '340',
        thisCancas: null,
        dieserKontext: null,
        diesesVideo: null,
        Bildquelle: ``,
      }
    },
    montiert() {
      wenn (dies.zeigen) dies.getCompetence()
    },
    Methoden: {
      /*
       *@Autor Brady
       *@Zeit 05.09.2019
       *@Funktionsaufrufberechtigung********************************************/
      getCompetence() {
        var _this = dies
        dies.thisCancas = document.getElementById('Leinwand')
        dies.dieserKontext = dies.dieserCancas.getContext('2d')
        dies.diesesVideo = document.getElementById('video')
        // Ältere Browser unterstützen MediaDevices möglicherweise überhaupt nicht, daher setzen wir zuerst ein leeres Objekt if (navigator.mediaDevices === undefined) {
          navigator.mediaDevices = {}
        }
        // Einige Browser implementieren teilweise MediaDevices und wir können nicht einfach ein Objekt // mit getUserMedia zuweisen, weil dies vorhandene Eigenschaften überschreiben würde.
        // Falls die Eigenschaft getUserMedia fehlt, fügen Sie sie hier hinzu.
        wenn (navigator.mediaDevices.getUserMedia === undefiniert) {
          navigator.mediaDevices.getUserMedia = Funktion (Einschränkungen) {
            // Zuerst das vorhandene getUserMedia abrufen (falls vorhanden)
            var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia
            // Einige Browser unterstützen dies nicht und geben eine Fehlermeldung zurück // Halten Sie die Schnittstelle konsistent if (!getUserMedia) {
              return Promise.reject(new Error('getUserMedia ist in diesem Browser nicht implementiert'))
            }
            // Andernfalls schließen Sie den Aufruf des alten navigator.getUserMedia mit einem Promise ab.
            returniere neues Promise(Funktion (auflösen, ablehnen) {
              getUserMedia.call(Navigator, Einschränkungen, Auflösen, Ablehnen)
            })
          }
        }
        var Einschränkungen = {
          Audio: falsch,
          Video: {Breite: diese.Videobreite, Höhe: diese.Videohöhe, Transformieren: 'scaleX(-1)'}
        }
        navigator.mediaDevices.getUserMedia(Einschränkungen).dann(Funktion (Stream) {
          // Ältere Browser haben möglicherweise kein srcObject
          wenn ('srcObject' in _this.thisVideo) {
            _this.thisVideo.srcObject = Strom
          } anders {
            // Vermeiden Sie die Verwendung in neueren Browsern, da es veraltet ist.
            _this.thisVideo.src = Fenster.URL.createObjectURL(Stream)
          }
          _this.thisVideo.onloadedmetadata = Funktion (e) {
            _dieses.diesesVideo.abspielen()
          }
        }).catch(err => {
          console.log(fehler)
        })
      },
      /*
       *@Autor Brady
       *@Zeit 05.09.2019
       *@Funktion Bild zeichnen*********************************************/
      setzeBild() {
        var _this = dies
        // Klicken Sie auf Leinwand, die_this.thisContext.drawImage(_this.thisVideo, 0, 0, _this.videoWidth, _this.videoHeight) zeichnet.
        // Holen Sie sich den Base64-Link des Bildes var image = this.thisCancas.toDataURL('image/png')
        _this.imgSrc = Bild
        // konsole.log(_this.imgSrc)
        // dies.$emit('refreshDataList', dies.imgSrc)
      },
      /*
       *@Autor Brady
       *@Zeit 05.09.2019
       *@Funktion base64 Datei konvertieren********************************************/
      dataURLtoFile(dataurl, Dateiname) {
        var arr = dataurl.split(',')
        var mime = arr[0].match(/:(.*?);/)[1]
        var bstr = atob(arr[1])
        var n = bstr.Länge
        var u8arr = neues Uint8Array(n)
        während (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        gib eine neue Datei zurück([u8arr], Dateiname, {Typ: MIME})
      },
      /*
       *@Autor Brady
       *@Zeit 05.09.2019
       *@function Kamera schließen*********************************************/
      stopNavigator() {
        dies.thisVideo.srcObject.getTracks()[0].stop()
      },
      //Bild hochladen setFileUpload() {
        //Datei bearbeiten - Gesichtsfoto hochladen if (this.deleteData) {
          wenn (diese.deleteData.imagePath) {
            deleteFileUpload({id: this.deleteData.id, Dateipfad: this.deleteData.Bildpfad})
              .then(res => {
                setFileUpload({Bild: this.imgSrc})
                  .then(res => {
                    dies.$emit('fileUpload', res.retData.filePath, res.retData.imagePath)
                    addUserCard({Benutzer-ID: this.deleteData.userid, Kartentyp: this.deleteData.cardType, Benutzer-AuditInfo: res.retData.imagePath})
                      .then(res => {
                        this.$message({message: "Upload erfolgreich", Typ: "Erfolg"})
                      })
                      .catch(err => {
                        console.log(fehler)
                      })
                  })
                  .catch(err => {
                    console.log(fehler)
                  })
              })
              .catch(err => {
                console.log(fehler)
              })
          } anders {
            setFileUpload({Bild: this.imgSrc})
              .then(res => {
                dies.$emit('fileUpload', res.retData.filePath, res.retData.imagePath)
                addUserCard({Benutzer-ID: this.deleteData.userid, Kartentyp: this.deleteData.cardType, Benutzer-AuditInfo: res.retData.imagePath})
                  .then(res => {
                    this.$message({message: "Upload erfolgreich", Typ: "Erfolg"})
                  })
                  .catch(err => {
                    console.log(fehler)
                  })
              })
              .catch(err => {
                console.log(fehler)
              })
          }
        } anders {
          //Bewohner hinzufügen – Gesichtsfoto hochladen setFileUpload({image: this.imgSrc})
            .then(res => {
              // konsole.log(res)
              this.$message({message: "Upload erfolgreich", Typ: "Erfolg"})
              dies.$emit('fileUpload', res.retData.filePath, res.retData.imagePath)
            })
            .catch(err => {
              console.log(fehler)
            })
        }
      },
    },
    betrachten:
      anzeigen(Wert) {
        wenn (Wert) {
          dies.imgSrc = ``
          dies.getCompetence()
        } anders {
          dies.stopNavigator()
        }
      },
    }
  }
</Skript>

<style lang="less">
  .Kamera-Box {
    Rand: 0 automatisch;
    Textausrichtung: zentriert;

    .Kamera-p {
      Höhe: 17px;
      Zeilenhöhe: 17px;
      Schriftgröße: 12px;
      Schriftfamilie: „PingFang SC“;
      Schriftstärke: 400;
      Farbe: rgba(154, 154, 154, 1);
      Textausrichtung: links;
    }

    .Kamera-btn {
      Rand oben: 20px;
    }

  }
</Stil>

<Vorlage>
  <div id="Kamera-Dialog">
    <el-dialog
            Titel="Mach ein Foto"
            :visible.sync="dialogSichtbar"
            oben="5vh"
            Breite="481px"
            @close="dialogAbbrechen"
            :Schließen bei Klick-Modal="false"
            :before-close="dialogAbbrechen"
    >
      <Kamera :show="dialogSichtbar" :deleteData="deleteData" @fileUpload="fileUpload"></Kamera>
      <span slot="Fußzeile" class="dialog-footer">
          <!-- <el-button @click="dialogCancle">Abbrechen</el-button> -->
        <!-- <el-button type="primary">OK</el-button> -->
        </span>
    </el-dialog>
  </div>
</Vorlage>

<Skript>
  Kamera aus „@/page/house/Camera.vue“ importieren

  Standard exportieren {
    Name: "CameraDialog",
    Requisiten: {
      dialogVisible: {Typ: Boolean},
      deleteData: {Typ: Objekt}
    },
    Komponenten:
      Kamera
    },
    Daten() {
      zurückkehren {
        Dateipfad: ``,
        Bildpfad: ``,
      }
    },
    Methoden: {
      //Popup-Fenster schließen dialogCancle() {
        dies.$emit('dialogAbbrechen', false, dieser.Dateipfad, dieser.Bildpfad);
      },
      //Adresse des Gesichtsfotos abrufen fileUpload(filePath, imagePath) {
        this.filePath = Dateipfad
        this.imagePath = Bildpfad
        this.dialogAbbrechen()
      }
    }
  }
</Skript>

<Stilbereich>
</Stil>

<Vorlage>
  <div>
    <div Klasse="form-thumb">
     <img :src="Dateipfad" alt="">
      <i class="delete-btn" @click="deleteUploadFile" v-if="deleteData.imagePath">x</i>
    </div>
    <div Klasse="upload-btn">
       <input type="file" name="userAuditInfo" id="userAuditInfo" @change="getUploadFile" ref="inputFile">
       <el-button type="defualt" size="small" @click="localUploadFile">Lokaler Upload</el-button>
       <el-button type="default" size="small" @click="dialogVisible=true">Foto machen</el-button>
     </div>
    <!-- Popup-Fenster zum Aufnehmen von Fotos-->
    <CameraDialog :dialogVisible="dialogVisible" @dialogCancle="dialogCancleCamera" :deleteData="Daten löschen" />
  </div> 
</Vorlage>

<Skript>
  Importiere CameraDialog aus „./CameraDialog.vue“
  importiere { setFileUpload, deleteFileUpload, addUserCard } aus "@/api/houseApi.js"
  Standard exportieren {
    Daten() {
      zurückkehren {
        filePath: require('@/assets/images/null.png'), //Ausweis-Avatar dialogVisible: false,
        //Operation zum Löschen von mit Gesichtsfotos in Zusammenhang stehenden Feldern deleteData: {
          Benutzer-ID: this.$route.query.userId,
          Ich würde: ``,
          Kartentyp: 4,
          Bildpfad: ``,
        }
   }
 },
 Methoden: {
      //Klick simulieren, um lokal ein Gesichtsfoto hochzuladenlocalUploadFile() {
        dies.$refs.inputFile.click()
      },
      //Gesichtsfoto lokal hochladen getUploadFile() {
        let input = document.getElementById('userAuditInfo')
        let Datei = Eingabe.Dateien[0]
        this.getBase64(Datei)
          .then(res => {
            wenn (diese.deleteData.imagePath) {
              deleteFileUpload({id: this.deleteData.id, Dateipfad: this.deleteData.Bildpfad})
                .then(() => {
                  dies.setFileUpload(res)
                })
            } anders {
              dies.setFileUpload(res)
            }
          })
          .catch(err => {
            console.log(fehler)
          })
      },
      //Gesichtsfoto hochladen setFileUpload(res) {
        setFileUpload({Bild: res})
          .then(res => {
            dieser.Dateipfad = res.retData.Dateipfad
            this.deleteData.imagePath = res.retData.imagePath
            addUserCard({Benutzer-ID: this.deleteData.userid, Kartentyp: this.deleteData.cardType, Benutzer-AuditInfo: res.retData.imagePath})
              .then(res => {
                dies.$message({Nachricht: res.retInfo, Typ: "Erfolg"})
                //Wird zum Aktualisieren von Daten verwendet. Diese Methode zeigt this.getInfo() nicht an.
              })
              .catch(err => {
                console.log(fehler)
              })
          })
          .catch(err => {
            console.log(fehler)
          })
      },
      //In Base64 konvertieren
      getBase64(Datei) {
        returniere neues Promise(Funktion (auflösen, ablehnen) {
          : Der Reader kann nicht mit anderen Dateien verbunden werden.
          let imgResult = "";
          reader.readAsDataURL(Datei);
          Leser.onload = Funktion () {
            imgResult = Leser.Ergebnis;
          };
          reader.onerror = Funktion (Fehler) {
            ablehnen(Fehler);
          };
          reader.onloadend = Funktion () {
            auflösen(imgResult);
          };
        });
      },
      //Gesichtsfoto löschen deleteUploadFile() {
        this.$confirm(`Löschen bestätigen?`, 'prompt', {
          confirmButtonText: 'Bestätigen',
          cancelButtonText: 'Abbrechen',
          Typ: "Warnung"
        }).then(() => {
          deleteFileUpload({id: this.deleteData.id, Dateipfad: this.deleteData.Bildpfad})
            .then(res => {
              dies.$message({Nachricht: res.retInfo, Typ: "Erfolg"})
              this.filePath = erfordert('@/assets/images/null.png')
              this.deleteData.imagePath = ''
            })
            .catch(err => {
              console.log(fehler)
            })
        }).catch(() => {});
      },
      //Dialog-Popup-Fenster abbrechen und hochgeladenes Gesichtsfoto abrufen dialogCancleCamera(str, filePath, imagePath) {
        this.dialogVisible = str
        // this.houseInfo.filePath = Dateipfad
        // this.houseInfo.userAuditInfo = Bildpfad
        this.filePath = Dateipfad
        this.deleteData.imagePath = Bildpfad
        dies.getInfo()
      }, 
 }
  }
</Skript> 

<Stil scoped="Bereich">
  .upload-btn {
    Position: relativ;
    Rand: 20px 12px 0 0;
    Textausrichtung: rechts;
  }
  Eingabe#userAuditInfo {
    Position: absolut;
    Anzeige: Inline-Block;
    Breite: 80px;
    Höhe: 32px;
    oben: 0;
    Cursor: Zeiger;
    Schriftgröße: 0;
    z-Index: -1;
    /*Deckkraft: 0;*/
  }
  .delete-btn {
    Position: absolut;
    oben: -6px;
    rechts: -6px;
    Anzeige: Inline-Block;
    Breite: 16px;
    Höhe: 16px;
    Zeilenhöhe: 14px;
    Hintergrund: rgba(251, 135, 66, 1);
    Rahmenradius: 8px;
    Textausrichtung: zentriert;
    Schriftgröße: 12px;
    Farbe: #fff;
    Cursor: Zeiger;
  }
</Stil>