在计算机或手机上控制相机的HTML5 Canvas + JS示例

移动设备和台式计算机上的客户端API最初并未同步. 最初，移动设备始终具有某些功能和相应的API，但是慢慢地，这些API将出现在台式计算机上. 应用程序接口技术之一是getUserMedia API，它使应用程序开发人员可以访问用户的或内置. 让我向您展示如何通过浏览器访问相机并提取屏幕截图图形.

HTML代码

我在以下代码中写了一些评论，请阅读:

代码如下:

<！-

理想情况下，我们应该首先判断它是否在您的设备上

有一个或照相机，但为简单起见，我们直接在这里

编写HTML标签，而不是先使用JavaScript进行判断

然后动态生成这些标签

->

<视频自动播放>

拍照

在编写上述标签之前，您应该确定用户的客户端是否支持相机，但这是为了减少麻烦直接编写这些HTML标签. 应该注意的是，我们在这里使用的长和宽是640×480.

JavaScript代码

由于我们是手工编写HTML，因此以下js代码比您想象的要简单得多.

代码如下:

//将事件侦听器放到位

window.addEventListener（“ DOMContentLoaded”，函数（）{

//抓取元素，创建设置等

var canvas = document.getElementById（“ canvas”），

context = canvas.getContext（“ 2d”），

video = document.getElementById（“视频”），

videoObj = {“视频”: true}，

errBack =函数（错误）{

console.log（“视频捕获错误: ”，错误代码）；

};

//将视频侦听器放置到位

if（navigator.getUserMedia）{//标准

navigator.getUserMedia（videoObj，函数（流）{

video.src =流；

video.play（）;

}js调取手机相册，errBack）；

}否则，如果（navigator.webkitGetUserMedia）{//带有WebKit前缀

navigator.webkitGetUserMedia（videoObj，函数（流）{

video.src = window.webkitURL.createObjectURL（stream）;

video.play（）;

}，errBack）；

}

否则，如果（navigator.mozGetUserMedia）{// Firefox前缀

navigator.mozGetUserMedia（videoObj，函数（流）{

video.src = window.URL.createObjectURL（stream）;

video.play（）;

}，errBack）；

}

}，否）；

一旦确定用户的浏览器支持getUserMedia，以下内容将非常简单. 您只需要将video元素的src设置为用户的摄像机实时视频连接. 这是使用浏览器访问相机所需要做的！

拍照功能只能说有点复杂. 我们在按钮上添加了一个侦听器，以将视频图像绘制到画布上.

代码如下:

//触发相机动作

document.getElementById（“快照”）

.addEventListener（“ click”，function（）{

context.drawImage（视频，0、0、640、480）;

}）;

当然，您也可以在图片中添加一些滤镜效果...

过去，我们需要使用第三方插件从浏览器访问用户的相机，这不可避免地很复杂. 现在只需要HTML5 canvas技术和javaScript，我们就可以轻松快捷地操作用户的. 不仅可以使用相机，而且由于HTML5的画布技术及其强大功能，我们可以为图片添加各种迷人的滤镜效果. 现在js调取手机相册，使用相机在浏览器中拍摄自己的照片！

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/ruanjian/article-178350-1.html