Verwenden von HTML5 zum Aufnehmen von Bildern, Beispielcode_html5-Tutorial-Tipps

Demoadresse: HTML5-Fotoaufnahme-Demo
Schauen wir uns zunächst die HTML-Codestruktur an. Natürlich sollte dieser Teil des DOM-Inhalts dynamisch geladen und generiert werden, nachdem der Benutzer die Verwendung erlaubt hat ihr Kamera-Event.
Hinweis: Wir verwenden die Auflösung 640X480. Wenn Sie JS zur dynamischen Generierung verwenden, können Sie die Auflösung flexibel steuern.

Code kopieren

Der Code lautet wie folgt:

Snap Photo
< ;canvas id="canvas" width="640" height="480">


JavaScript
Solange das obige HTML-Element vorhanden ist erstellt wird, wird der JavaScript-Teil einfach sein. Es ist einfacher als Sie denken:

Kopieren Sie den Code

Der Code lautet wie folgt :

/ / Stellen Sie die Ereignisüberwachung ein, das Laden des DOM-Inhalts ist abgeschlossen und der Effekt ähnelt dem $.ready() von jQuery.

window.addEventListener("DOMContentLoaded", function() {

// Das Canvas-Element wird zum Erfassen verwendet
var canvas = document.getElementById("canvas"),
context = Canvas. getContext( "2d"),
// Videoelement, das zum Empfangen und Abspielen des Datenstroms der Kamera verwendet wird
video = document.getElementById("video"),
videoObj = { "video" : true },
// Eine Fehlerrückruffunktion, gibt Fehlerinformationen auf der Konsole aus
errBack = function(error) {
if("object" === typeof window.console){
console.log ("Videoaufnahmefehler: ", error.code);
}
// Video-Listener einrichten
// Für Standardbrowser
if(navigator. getUserMedia ) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
},
} else if(navigator.webkitGetUserMedia) { // WebKit-Präfix
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play( ) ;
}, errBack);
}
// Ereignisüberwachung für den Foto-Button
document.getElementById("snap").addEventListener("click", function() {
// Auf die Leinwand zeichnen
context.drawImage(video, 0, 0, 640, 480);
},


Denken Sie daran zu sagen Stellen Sie Ihre Webseite unter den Webserver und greifen Sie über das http-Protokoll darauf zu.
Außerdem muss die Browserversion neuer sein und die neuen Funktionen von HTML5 unterstützen.
Der Übersetzer ist nicht qualifiziert, da er nicht gemäß dem Originaltext übersetzt hat. Der verwendete Browser ist Chrome 28.
Fügen Sie abschließend den vollständigen Code ein, der ziemlich langweilig ist.

Code kopieren

Der Code lautet wie folgt: