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


Posted in HTML / CSS onDecember 11, 2013

1、 视频流

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

复制代码
代码如下:

<videoidvideoid=”video”autoplay=”"></video>
<script>
varvideo_element=document.getElementById(‘video’);
if(navigator.getUserMedia){//operashoulduseopera.getUserMedianow
navigator.getUserMedia(‘video’,success,error);
}
functionsuccess(stream){
video_element.src=stream;
}
</script>

视频流

2、 拍照

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

 

复制代码
代码如下:

JavaScript Code复制内容到剪贴板
var canvas=document.createElement(‘canvas’);
var ctx=canvas.getContext(’2d’);
var cw=vw;
var ch=vh;
ctx.fillStyle=”#ffffff”;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,vvw,vvh,0,0,vw,vh);
document.body.append(canvas);

3、 图片获取

下面我们要从Canvas获取图片数据,其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像,类似于“data:image/png;base64,xxxxx”的格式。

复制代码
代码如下:

var imgData=canvas.toDataURL(“image/png”);

因为真正图像数据是base64编码逗号之后的部分,所以我们实际服务器处理的图像数据应该是这部分,我们可以用两种办法来获取。

第一种:是在前端截取22位以后的字符串作为图像数据,例如:

复制代码
代码如下:

var data=imgData.substr(22);

如果要在上传前获取图片的大小,可以使用:

 

复制代码
代码如下:

var length=atob(data).length;//atobdecodesastringofdatawhichhasbeenencodedusingbase-64encoding

第二种:是在后端获取传输的数据后用后台语言截取22位以后的字符串。例如PHP里:

复制代码
代码如下:

$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);

4、 图片上传

在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时:

复制代码
代码如下:

$.post(‘upload.php’,{‘data’:data});

 在后台我们用PHP脚本接收数据并存储为图片。
复制代码
代码如下:

functionconvert_data($data){
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
save_to_file($image);
}
functionsave_to_file($image){
$fp=fopen($filename,’w');
fwrite($fp,$image);
fclose($fp);
}

请注意,以上的解决方案不仅能用于Web App拍照上传,并且你可以实现把Canvas的输出转换为图片上传的功能。这样你可以使用Canvas为用户提供图片编辑,例如裁剪、上色、涂鸦的画板功能,然后把用户编辑完的图片保存到服务器上。

HTML / CSS 相关文章推荐
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 #HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 #HTML / CSS
html5教程画矩形代码分享
Dec 04 #HTML / CSS
html5教程制作简单画板代码分享
Dec 04 #HTML / CSS
html5 viewport使用方法示例详解
Dec 02 #HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 #HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 #HTML / CSS
You might like
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
Python探索之创建二叉树
2017/10/25 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
Python面向对象类的继承实例详解
2018/06/27 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
基于Python实现粒子滤波效果
2020/12/01 Python
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
单位未婚证明范本
2014/01/18 职场文书
体育之星事迹材料
2014/05/11 职场文书
派出所所长先进事迹
2014/05/19 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
领导班子整改措施
2014/10/24 职场文书
上课说话检讨书500字
2014/11/01 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
投诉书范文
2015/07/02 职场文书