如何使用HTML5实现拍照功能-创新互联

这篇文章主要介绍“如何使用HTML5实现拍照功能”，在日常操作中，相信很多人在如何使用HTML5实现拍照功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用HTML5实现拍照功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联公司专注于中大型企业的成都网站设计、网站制作和网站改版、网站营销服务，追求商业策划与数据分析、创意艺术与技术开发的融合，累计客户上千，服务满意度达97%。帮助广大客户顺利对接上互联网浪潮，准确优选出符合自己需要的互联网运用，我们将一直专注成都品牌网站建设和互联网程序开发，在前进的路上，与客户一起成长！

代码如下:

Snap Photo

JavaScript
只要上面的HTML元素创建完成，那么JavaScript部分将简单的超乎你想象的简单：

代码如下:

// 设置事件监听，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);

最后，记得讲您的网页放到web服务器下面，然后通过http协议来访问哦。
另外，需要浏览器版本较新，并且支持HTML5的相关新特性才可以。
译者不算称职啦，没有按原文来翻译。使用的浏览器是chrome 28。
最后，贴上完整的代码，比较呆板。

代码如下:

到此，关于“如何使用HTML5实现拍照功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

文章名称：如何使用HTML5实现拍照功能-创新互联
网页URL：http://bjjierui.cn/article/ihjic.html