Einführung in Beispielcode zum Aufnehmen von Bildern mit HTML5

HTML5Fotos aufnehmen 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 seiner Kamera erlaubt Veranstaltung . Interessierte Freunde können sich darüber informieren
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 Kameraereignis.
Hinweis: Wir verwenden die Auflösung 640X480. Wenn Sie JS zur dynamischen Generierung verwenden, können Sie die Auflösung flexibel steuern.

Der Code lautet wie folgt:

<!-- 
声明： 此p应该在允许使用webcam，网络摄像头之后动态生成 
宽高： 640 *480,当然，可以动态控制啦! 
--> 
<!-- 
Ideally these elements aren&#39;t created until it&#39;s confirmed that the 
client supports video/camera, but for the sake of illustrating the 
elements involved, they are created with markup (not JavaScript) 
--> 
<video id="video" width="640" height="480" autoplay></video> 
<button id="snap">Snap Photo</button> 
<canvas id="canvas" width="640" height="480"></canvas>

JavaScript
Solange das obige HTML-Element erstellt wird, wird der JavaScript-Teil einfacher als Sie sich vorstellen. Einfach:

Der Code lautet wie folgt:

// 设置事件监听，DOM内容加载完成，和jQuery的$.ready() 效果差不多。 
window.addEventListener("DOMContentLoaded", function() { 
// canvas 元素将用于抓拍 
var canvas = document.getElementById("canvas"), 
context = canvas.getContext("2d"), 
// video 元素，将用于接收并播放摄像头 的数据流 
video = document.getElementById("video"), 
videoObj = { "video": true }, 
// 一个出错的回调函数，在控制台打印出错信息 
errBack = function(error) { 
if("object" === typeof window.console){ 
console.log("Video capture error: ", error.code); 
} 
}; 
// Put video listeners into place 
// 针对标准的浏览器 
if(navigator.getUserMedia) { // Standard 
navigator.getUserMedia(videoObj, function(stream) { 
video.src = stream; 
video.play(); 
}, errBack); 
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed 
navigator.webkitGetUserMedia(videoObj, function(stream){ 
video.src = window.webkitURL.createObjectURL(stream); 
video.play(); 
}, errBack); 
} 
// 对拍照按钮的事件监听 
document.getElementById("snap").addEventListener("click", function() { 
// 画到画布上 
context.drawImage(video, 0, 0, 640, 480); 
}); 
}, false);

Denken Sie abschließend daran, Ihre Webseite unter dem Webserver abzulegen und dann darauf zuzugreifen das http-Protokoll.
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.

Der Code lautet wie folgt:

 
 
 
 
 
 
 
<script> 
// 设置事件监听，DOM内容加载完成，和jQuery的$.ready() 效果差不多。 
window.addEventListener(&quot;DOMContentLoaded&quot;, function() { 
// canvas 元素将用于抓拍 
var canvas = document.getElementById(&quot;canvas&quot;), 
context = canvas.getContext(&quot;2d&quot;), 
// video 元素，将用于接收并播放摄像头 的数据流 
video = document.getElementById(&quot;video&quot;), 
videoObj = { &quot;video&quot;: true }, 
// 一个出错的回调函数，在控制台打印出错信息 
errBack = function(error) { 
if(&quot;object&quot; === typeof window.console){ 
console.log(&quot;Video capture error: &quot;, error.code); 
} 
}; 
// Put video listeners into place 
// 针对标准的浏览器 
if(navigator.getUserMedia) { // Standard 
navigator.getUserMedia(videoObj, function(stream) { 
video.src = stream; 
video.play(); 
}, errBack); 
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed 
navigator.webkitGetUserMedia(videoObj, function(stream){ 
video.src = window.webkitURL.createObjectURL(stream); 
video.play(); 
}, errBack); 
} 
// 对拍照按钮的事件监听 
document.getElementById(&quot;snap&quot;).addEventListener(&quot;click&quot;, function() { 
// 画到画布上 
context.drawImage(video, 0, 0, 640, 480); 
}); 
}, false); 
</script> 
 
 
 
<!-- 
声明： 此p应该在允许使用webcam，网络摄像头之后动态生成 
宽高： 640 *480,当然，可以动态控制啦! 
--> 
<!-- 
Ideally these elements aren&#39;t created until it&#39;s confirmed that the 
client supports video/camera, but for the sake of illustrating the 
elements involved, they are created with markup (not JavaScript) 
--> 
<video id="video" width="640" height="480" autoplay></video> 
<button id="snap">Snap Photo</button> 
<canvas id="canvas" width="640" height="480"></canvas> 
 
 

Das obige ist der detaillierte Inhalt vonEinführung in Beispielcode zum Aufnehmen von Bildern mit HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!