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
So ändern Sie die Längenbeschränkung von group_concat in MySQL
In MySQL gibt es eine Funktion namens „group_conc...
Einführung in mögliche Probleme nach der Installation von Tomcat
1. Der Tomcat-Dienst ist nicht geöffnet Geben Sie...
Shell-Skript Nginx-Automatisierungsskript
Dieses Skript kann die Vorgänge zum Starten, Stop...
Detaillierter Prozess zur Verwendung von VMware zum Testen des PXE-Batchinstallationsservers
Inhaltsverzeichnis 1. Vorbereitung 1. Bereiten Si...
So vergleichen Sie zwei Datenbanktabellenstrukturen in MySQL
Während des Entwicklungs- und Debugging-Prozesses...
Detaillierte Erläuterung der Linux-Dateiberechtigungen und Befehle zur Gruppenänderung
Unter Linux ist alles eine Datei (Verzeichnisse s...
Vue implementiert Paging-Funktion
In diesem Artikelbeispiel wird der spezifische Co...
Ein Artikel, der Ihnen hilft, jQuery-Animationen zu verstehen
Inhaltsverzeichnis 1. Steuern Sie die Anzeige und...
Detaillierte Erläuterung der objektorientierten Praxis von JavaScript: Kapselung und Ziehen von Objekten
Inhaltsverzeichnis Überblick 1. So animieren Sie ...
MySQL-Methode zum Anzeigen der aktuell verwendeten Konfigurationsdatei my.cnf (empfohlen)
my.cnf ist die Konfigurationsdatei, die beim Star...
MySQL-Index für Anfänger
Vorwort Da die wichtigste Datenstruktur im MySQL-...
Beispiel einer Skriptmethode für die Bindung von Linux-Dualnetzwerkkarten
Bei der Bedienung und Konfiguration von Linux wir...
Beispielcode von layim zum Integrieren des Rechtsklickmenüs in JavaScript
Inhaltsverzeichnis 1. Wirkungsdemonstration 2. Im...
Erstellen von Befehlszeilen-Anwendungen mit JavaScript
Inhaltsverzeichnis 1. Knoten installieren 2. Inst...
Das Problem, dass Formularelemente und Eingabeaufforderungstext nicht ausgerichtet sind
In den letzten Projekten werden viele Formulare e...