html5在线拍照 源码,html5拍照功能实现代码(htm5上传文件)

时间:2013-12-21来源:源码库 作者:源码库 文章热度:

℃

点评：在HTML5规范的支持下，WebApp在手机上拍照已经成为可能。在下面，我将讲解Web App如何用手机进行拍照，显示在页面上并上传到服务器

1、 视频流

HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签的输入来源(请注意目前仅Chrome和Opera支持getUserMedia)。

复制代码代码如下:

varvideo_element=document.getElementById(‘video’);

if(navigator.getUserMedia){//operashoulduseopera.getUserMedianow

navigator.getUserMedia(‘video’,success,error);

}

functionsuccess(stream){

video_element.src=stream;

}

视频流

2、 拍照

拍照功能，我们采用HTML5的Canvas实时捕获Video标签的内容，Video元素能作为Canvas图像的输入，这一点很棒。主要代码如下：

复制代码代码如下:

JavaScript Code复制内容到剪贴板

var canvas=document.createElement(‘canvas’);

var ctx=canvas.getContext(’2d’);