Vue realisiert die Funktion zum Hochladen von Fotos auf den PC
|
In diesem Artikelbeispiel wird der spezifische Code von Vue zur Realisierung der Foto-Upload-Funktion auf dem PC als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF8">
</Kopf>
<Text>
<div id="Inhaltsinhaber">
<video id="video" width="320" height="320" automatische Wiedergabe></video>
<button id="camera">Foto machen</button>
<canvas id="canvas" Breite="320" Höhe="320">
</Leinwand>
</div>
<Skripttyp="text/javascript">
var video = document.getElementById('video');
var Spur;
var Kamera = document.getElementById('Kamera');
window.addEventListener("DOMContentLoaded", Funktion(){
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
wenn (navigator.getUserMedia) {
navigator.getUserMedia({video:true},
Funktion(Stream) {
track = stream.getTracks()[0]; // Verwenden Sie dies, um die Kamera auszuschalten video.src = window.URL.createObjectURL(stream);
video.onloadedmetadata = Funktion(e) {
video.abspielen();
};
},
Funktion(Fehler) {
Alarm(Fehlername);
}
);
}
});
Kamera.onclick = Funktion(){
var Leinwand = document.getElementById('Leinwand');
var context2D = canvas.getContext("2d");
context2D.fillStyle = "#ffffff";
context2D.fillRect(0, 0, 320, 320);
context2D.drawImage(video, 0, 0, 320, 320);
var image_code = canvas.toDataURL("image/png"); // Base64 zur Übergabe an das Backend
Konsole.log(Bildcode)
wenn (null != Spur) {
track.stop(); //Kamera schließen}
};
</Skript>
</body>
</html>Der obige Code ruft die Kamera auf, wenn die Webseite geöffnet wird Der an das Backend gesendete Code ist ein Base64-Code Unten ist der Code, den ich mit Vue in den Hintergrund übergeben habe
var param = {
Datei:Bildcode2
}
var a = JSON.stringify(param);
uploadimg(a).then((res) => {
konsole.log(res);
});Unten ist mein PHP-Hintergrund-Empfangscode
öffentliche Funktion uploadImg($name="img",$path='img'){
$_POST = json_decode(file_get_contents('php://input'),true);
$param = $_POST;
$image_code = $param['Datei'];
$img = str_replace('data:image/png;base64,', '', $image_code); //Base64-Code abrufen $img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$name = Zeit().png";
$savepath = "./upload/".$name; //Der Ort, an dem das Bild gespeichert wird file_put_contents($savepath,$data); //Schreibe den Inhalt in die Datei $this->ajaxReturn(array('status'=>'0','data'=>$savepath));
}Wenn Sie durch Klicken das Öffnen der Kamera auslösen möchten, können Sie den Code von der Kamera übernehmen und in eine Methode einfügen.
var Kamera = document.getElementById('Kamera');
window.addEventListener("DOMContentLoaded", Funktion(){
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
});
Funktion demo(){
wenn (navigator.getUserMedia) {
navigator.getUserMedia({video:true},
Funktion(Stream) {
track = stream.getTracks()[0]; // Verwenden Sie dies, um die Kamera auszuschalten video.src = window.URL.createObjectURL(stream);
video.onloadedmetadata = Funktion(e) {
video.abspielen();
};
},
Funktion(Fehler) {
Alarm(Fehlername);
}
);
}
}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:
|
<<: MySQL verwendet den Befehl truncate, um alle Tabellen in einer Datenbank schnell zu löschen
>>: Alibaba Cloud Server Linux-System erstellt Tomcat zur Bereitstellung von Webprojekten
Artikel empfehlen
Beispiel zum Entfernen eines JSON-Backslashs in PHP
1. Entfernen Sie Backslashes mit der Methode „str...
Natives JS zur Implementierung eines Dropdown-Menüs
Dropdown-Menüs sind auch im wirklichen Leben weit...
Detaillierte Zusammenfassung häufig verwendeter MySQL-Funktionen
Inhaltsverzeichnis Allgemeine MySQL-Funktionen 1....
Detaillierte Schritte zum Ausführen eines Springboot-Projekts in Linux Docker
Einführung: Die Konfiguration von Docker, auf dem...
Der Prozess des Aufbaus einer Entwicklungsumgebung basierend auf Visual Studio Code + React
Entwicklungsumgebungsfenster Entwicklungstools Vi...
Beispiel für die Bereitstellungsmethode „Forever+nginx“ einer Node-Site
Ich habe vor Kurzem den günstigsten Tencent-Cloud...
So verwenden Sie die Vue-Timeline-Komponente
In diesem Artikelbeispiel wird der spezifische Im...
Detailliertes Tutorial zur Installation von MySQL 5.7.18 unter Linux (CentOS 7) mit YUM
Das Projekt muss MySQL verwenden. Da ich es zuvor...
Lassen Sie uns über das Problem der Vue-Integration der SweetAlert2-Eingabeaufforderungskomponente sprechen
Inhaltsverzeichnis 1. Projektintegration 1. CDN-I...
So empfangen Sie einen binären Dateistream in Vue, um eine PDF-Vorschau zu realisieren
Hintergrund-Controller @RequestMapping("/get...
IDEA-vollständiger Code zum Herstellen einer Verbindung mit einer MySQL-Datenbank und Durchführen von Abfragevorgängen
1. Schreiben Sie zuerst eine Mysql-Link-Einstellu...
So installieren Sie das MySQL6-Initialisierungsinstallationskennwort unter CentOS7
1. Stoppen Sie zuerst den Datenbankserver Dienst ...
So erstellen Sie YUM in einer Centos7-Umgebung
1. Geben Sie die Konfigurationsdatei der Yum-Quel...
jQuery-Plugin zur Implementierung des Dashboards
Das jQuery-Plug-In implementiert das Dashboard zu...
Lernhinweise zum WeChat-Applet: Seitenkonfiguration und -routing
Ich habe kürzlich die Entwicklung kleiner Program...