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 10 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 HTML / CSS
HTML5图片预览实例分享
Jun 04 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 HTML / CSS
在html页面中取得session中的值的方法
Aug 11 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
PHP 数组实例说明
2008/08/18 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
python 链接和操作 memcache方法
2017/03/04 Python
python GUI实例学习
2017/11/21 Python
python计算两个地址之间的距离方法
2018/06/09 Python
Python如何省略括号方法详解
2020/03/21 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
Python3.9新特性详解
2020/10/10 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
2015社区精神文明建设工作总结
2015/04/21 职场文书
复试通知单模板
2015/04/24 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
运动会广播稿100字
2015/08/19 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android
Django框架中模型的用法
2022/06/10 Python