Heim >Web-Frontend >H5-Tutorial >Verwenden von HTML5 zum Aufnehmen von Bildern, Beispielcode_html5-Tutorial-Tipps

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 15:49:011550Durchsuche

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:






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:




" content="EditPlus"> <br><meta name="Author" content="renfufei@qq.com"> <br><meta name="Description" content="invété par : http: / /davidwalsh.name/browser-camera"> <br><script> <br>// Définissez l'écoute des événements, le contenu DOM est chargé et l'effet est similaire à $.ready() de jQuery. <br>window.addEventListener("DOMContentLoaded", function() { <br>// L'élément canvas sera utilisé pour capturer <br>var canvas = document.getElementById("canvas"), <br>context = canvas. getContext( "2d"), <br>// élément vidéo, qui sera utilisé pour recevoir et lire le flux de données de la caméra <br>video = document.getElementById("video"), <br>videoObj = { "video" : true }, <br>// Une fonction de rappel d'erreur, imprime les informations d'erreur sur la console <br>errBack = function(error) { <br>if("object" === typeof window.console){ <br> console.log ("Erreur de capture vidéo : ", error.code); <br>} <br>// Mettre en place les auditeurs vidéo <br>// Pour les navigateurs standards<br>if(navigator. getUserMedia ) { // Standard <br>navigator.getUserMedia(videoObj, function(stream) { <br>video.src = stream; <br>video.play(); <br>}, errBack); else if(navigator.webkitGetUserMedia) { // Préfixe WebKit <br>navigator.webkitGetUserMedia(videoObj, function(stream){ <br>video.src = window.webkitURL.createObjectURL(stream); <br>video.play( ) ; <br>}, errBack); <br>} <br>// Surveillance des événements pour le bouton photo<br>document.getElementById("snap").addEventListener("click", function() { <br> // Dessiner sur le canevas <br>context.drawImage(video, 0, 0, 640, 480); <br>}, <br></script> /head> <br><body> <br><div> <br><!-- <br />Déclaration : ce div doit être généré dynamiquement après avoir autorisé l'utilisation de la webcam, de la webcam <br />Largeur et hauteur : 640 *480, Bien sûr, il peut être contrôlé dynamiquement <br />--> <br><!-- <br />Idéalement, ces éléments ne sont pas créés tant qu'il n'est pas confirmé que le <br />client prend en charge la vidéo. /camera, mais dans le but d'illustrer les <br />éléments impliqués, ils sont créés avec un balisage (et non du JavaScript) <br />--> <br><video id="video" width="640" height= "480" lecture automatique> ;</video> <br><button id="snap">Snap Photo</button> <br><canvas id="canvas" width="640" height="480" >< /toile> <br></div> <br></corps></div></span> </div></div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme:</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel:<a class="dBlack" title="HTML5-Labyrinthspiel (Kollisionserkennung), Beispiel 1_HTML5-Tutorial-Fähigkeiten" href="https://m.php.cn/de/faq/6229.html">HTML5-Labyrinthspiel (Kollisionserkennung), Beispiel 1_HTML5-Tutorial-Fähigkeiten</a></span><span>Nächster Artikel:<a class="dBlack" title="HTML5-Labyrinthspiel (Kollisionserkennung), Beispiel 1_HTML5-Tutorial-Fähigkeiten" href="https://m.php.cn/de/faq/6233.html">HTML5-Labyrinthspiel (Kollisionserkennung), Beispiel 1_HTML5-Tutorial-Fähigkeiten</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/de/faq/348281.html" title="Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite" class="aBlack">Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348372.html" title="Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)" class="aBlack">Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348373.html" title="Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9" class="aBlack">Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348374.html" title="Reguläre Ausdrücke und neue HTML5-Elemente" class="aBlack">Reguläre Ausdrücke und neue HTML5-Elemente</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348469.html" title="So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen" class="aBlack">So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>