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 schreiben Sie asynchrone Aufgaben in modernem JavaScript
Vorwort In diesem Artikel untersuchen wir die Ent...
Eine kurze Analyse der Verwendung von HTML-Float
Einige Verwendungen von Float Linke Aufhängung: f...
JavaScript implementiert das Topfschlagen-Spiel von Gray Wolf
1. Projektdokumente 2. Verwenden Sie HTML und CSS...
Vue erzielt einen nahtlosen Karusselleffekt (Laufschrift)
In diesem Artikelbeispiel wird der spezifische Co...
So erzielen Sie mit CSS einen Daten-Hotspot-Effekt
Die Wirkung ist wie folgt: analysieren 1. Hier se...
Detaillierte Erläuterung des Problems der gemischten Verwendung von Limit- und Summenfunktionen in MySQL
Vorwort Heute entschied sich ein Kollege nach der...
So implementieren Sie die Unschärfefunktion von DIV
Verwenden Sie Anti-Shake, um DIV verschwinden zu ...
Detaillierte Schritte zur Installation von MySQL auf CentOS 7
Wenn wir in CentOS7 MySQL installieren, wird Mari...
So erstellen Sie eine virtuelle Maschine mit Vagrant+VirtualBox
1. Einleitung Vagrant ist ein Tool zum Erstellen ...
So installieren Sie MySQL 5.7.17 und stellen die Kodierung in Windows auf UTF-8 ein
herunterladen Offizieller MySQL-Download, wählen ...
7 Möglichkeiten zum Schreiben einer Vue v-for-Schleife
Inhaltsverzeichnis 1. Verwenden Sie in der v-for-...
Auszeichnungssprache - Stylesheets drucken
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...
Grafische Analyse des Speicherorts der MySQL5.7-Konfigurationsdatei in der Windows-Umgebung
1. MySQL-Installationsverzeichnis Kopieren Sie de...
Eine einfache Implementierungsmethode für eine digitale LED-Uhr in CSS3
Das dürfte etwas sein, was viele Leute gemacht ha...
Zwei Möglichkeiten zum Beenden von Bash im Docker-Container unter Linux
Wenn Sie Bash beenden möchten, haben Sie zwei Mög...