Rumah >hujung hadapan web >Tutorial H5 >Menggunakan HTML5 untuk mengambil gambar contoh kod_html5 petua tutorial

Menggunakan HTML5 untuk mengambil gambar contoh kod_html5 petua tutorial

WBOYasal: 2016-05-16 15:49:011503semak imbas

Alamat demo: Demo pengambilan foto HTML5
Mula-mula, mari kita lihat struktur kod HTML Sudah tentu, bahagian kandungan DOM ini harus dimuatkan secara dinamik dan dijana selepas pengguna membenarkan penggunaan acara kamera mereka.
Nota: Kami menggunakan resolusi 640X480 Jika anda menggunakan JS untuk menjananya secara dinamik, anda boleh mengawal peleraian secara fleksibel.

Salin kod

Kod tersebut adalah seperti berikut:

--
Sebaik-baiknya elemen ini tidak dicipta sehingga ia disahkan bahawa
klien menyokong video/kamera, tetapi demi menggambarkan
elemen yang terlibat, ia dicipta dengan markup (bukan JavaScript)
-->

JavaScript
Selagi elemen HTML di atas dicipta, bahagian JavaScript akan menjadi mudah Ia lebih mudah daripada yang anda fikirkan:

Salin kodKodnya adalah seperti berikut :

/ / Tetapkan mendengar acara, pemuatan kandungan DOM selesai dan kesannya serupa dengan $.ready() jQuery.
window.addEventListener("DOMContentLoaded", function() {
// Elemen kanvas akan digunakan untuk menangkap
var canvas = document.getElementById("canvas"),
context = canvas. getContext( "2d"),
// elemen video, yang akan digunakan untuk menerima dan memainkan strim data kamera
video = document.getElementById("video"),
videoObj = { "video" : true },
// Fungsi panggil balik ralat, mencetak maklumat ralat pada konsol
errBack = function(error) {
if("objek" === typeof window.console){
console.log ("Ralat tangkapan video: ", error.code);
};
// Letakkan pendengar video pada tempatnya
// Untuk pelayar standard
if(navigator. getUserMedia ) { // Standard
navigator.getUserMedia(videoObj, function(strim) {
video.src = stream;
video.play();
}, errBack); else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(strim){
video.src = window.webkitURL.createObjectURL(strim);
video.play( ) ;
}, errBack);
}
// Pemantauan acara untuk butang foto
document.getElementById("snap").addEventListener("click", function() {
/ Lukis ke kanvas
context.drawImage(video, 0, 0, 640, 480);
}, palsu); untuk mengatakan Letakkan halaman web anda di bawah pelayan web dan aksesnya melalui protokol http.
Selain itu, versi penyemak imbas perlu lebih baharu dan menyokong ciri baharu HTML5.
Penterjemah tidak layak kerana tidak menterjemah mengikut teks asal. Pelayar yang digunakan ialah chrome 28.
Akhir sekali, tampal kod lengkap, yang agak membosankan.

Salin kod

Kod tersebut adalah seperti berikut:

" content="EditPlus"> <br><meta name="Author" content="renfufei@qq.com"> <br><meta name="Description" content="inveted by: http: / /davidwalsh.name/browser-camera"> <br><script> <br>// Event-Listening festlegen, DOM-Inhalt wird geladen und der Effekt ist ähnlich wie bei $.ready() von jQuery. <br>window.addEventListener("DOMContentLoaded", function() { <br>// Das Canvas-Element wird zum Erfassen verwendet <br>var canvas = document.getElementById("canvas"), <br>context = Canvas. getContext( "2d"), <br>// Videoelement, das zum Empfangen und Abspielen des Datenstroms der Kamera verwendet wird <br>video = document.getElementById("video"), <br>videoObj = { "video" : true }, <br>// Eine Fehlerrückruffunktion, gibt Fehlerinformationen auf der Konsole aus <br>errBack = function(error) { <br>if("object" === typeof window.console){ <br> console.log ("Videoaufnahmefehler: ", error.code); <br>} <br>// Video-Listener einrichten <br>// Für Standardbrowser<br>if(navigator. getUserMedia ) { // Standard <br>navigator.getUserMedia(videoObj, function(stream) { <br>video.src = stream; <br>video.play(); <br>}, <br>} else if(navigator.webkitGetUserMedia) { // WebKit-Präfix <br>navigator.webkitGetUserMedia(videoObj, function(stream){ <br>video.src = window.webkitURL.createObjectURL(stream); <br>video.play( ) ; <br>}, errBack); <br>} <br>// Ereignisüberwachung für den Foto-Button<br>document.getElementById("snap").addEventListener("click", function() { <br> // Auf Leinwand zeichnen <br>context.drawImage(video, 0, 0, 640, 480); <br></script> /head> <br><body> <br><div> : 640 *480, Natürlich kann es dynamisch gesteuert werden! <br>--> <br><video id="video" width="640" height= "480" Autoplay> ;</video> <br><button id="snap">Snap Photo</button> >< /canvas> <br></div></div></div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Kenyataan：</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="Permainan maze HTML5 (pengesan perlanggaran) contoh 1_html5 kemahiran tutorial" href="https://m.php.cn/ms/faq/6229.html">Permainan maze HTML5 (pengesan perlanggaran) contoh 1_html5 kemahiran tutorial</a></span><span>Artikel seterusnya：<a class="dBlack" title="Permainan maze HTML5 (pengesan perlanggaran) contoh 1_html5 kemahiran tutorial" href="https://m.php.cn/ms/faq/6233.html">Permainan maze HTML5 (pengesan perlanggaran) contoh 1_html5 kemahiran tutorial</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="https://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</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/ms/faq/348281.html" title="AlloyTouch全屏滚动插件 30秒搞定顺滑H5页" class="aBlack">AlloyTouch全屏滚动插件 30秒搞定顺滑H5页</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348372.html" title="HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)" class="aBlack">HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348373.html" title="HTML5 canvas 9绘制图片实例详解" class="aBlack">HTML5 canvas 9绘制图片实例详解</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348374.html" title="正则表达式与HTML5新元素" class="aBlack">正则表达式与HTML5新元素</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348469.html" title="NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法" class="aBlack">NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法</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>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p></div><div class="footermid"><a href="https://m.php.cn/ms/about/us.html">Tentang kita</a><a href="https://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="https://m.php.cn/ms/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><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></html>