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实现简易版的刮刮乐效果
Sep 27 HTML / CSS
css3过渡_动力节点Java学院整理
Jul 11 HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 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之第九天
2006/10/09 PHP
调整PHP的性能
2013/10/30 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
javascript 单选框,多选框美化代码
2008/08/01 Javascript
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
js href的用法
2010/05/13 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
vue项目实战总结篇
2018/02/11 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
JS实现打字游戏
2019/12/17 Javascript
python处理圆角图片、圆形图片的例子
2014/04/25 Python
python中循环语句while用法实例
2015/05/16 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
出国留学担保书
2014/05/20 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
个人作风建设自查报告
2014/10/22 职场文书
用电申请报告范文
2015/05/18 职场文书
如何做好工作总结!
2019/04/10 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js