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
Optimierung der Web-Frontend-Leistung
Best Practices für die Web-Frontend-Optimierung: ...
HTML-Popup-Div ist sehr nützlich, um eine mobile Zentrierung zu realisieren
Code kopieren Der Code lautet wie folgt: <!DOC...
Automatisches Erstellen und Bereitstellen mit Docker+Jenkins
Dieser Artikel stellt die automatische Build-Bere...
Details zum TypeScript-Mapping-Typ
Inhaltsverzeichnis 1. Zugeordnete Typen 2. Mappin...
Lösung für das Problem, dass der externe Verifizierungslastenausgleich von Docker Swarm nicht wirksam wird
Problembeschreibung Ich habe drei virtuelle Masch...
Details zum Vue Page Stack Manager
Inhaltsverzeichnis 2. Bewährte Methoden 2.1 Am Le...
Implementierungscode für unendliches Scrollen mit n Containerelementen
Szenario So rendern Sie Listen mit bis zu 10.000 ...
So verwenden Sie Volume zum Übertragen von Dateien zwischen Host und Docker-Container
Ich habe zuvor einen Artikel über die Dateiübertr...
JavaScript zum Hinzufügen und Löschen von Nachrichten im Message Board
Dieser Artikel zeigt ein kleines Beispiel für das...
Praxis der Bereitstellung von in Python geschriebenen Webanwendungen mit Docker
Inhaltsverzeichnis 1. Docker installieren 2. Code...
So stellen Sie Redis in einer Linux-Umgebung bereit und installieren es in Docker
Installationsschritte 1. Redis installieren Laden...
Tools zum Konvertieren statischer Websites in RSS
<br /> Dieser Artikel wurde von Rachel Golds...
Detaillierte Erklärung der benutzerdefinierten Swiper-Komponente in JavaScript
Inhaltsverzeichnis Effektanzeige Komponenteneinst...
Detailliertes Tutorial zur Installation und Deinstallation von MySql
In diesem Artikel finden Sie das Tutorial zur Ins...
Installationsprozess von Zabbix-Agent auf Kylin V10
1. Laden Sie das Installationspaket herunter Down...