html5拍照上传 java_如何使用HTML5实现拍照上传应用
在HTML5规范的支持下,WebApp在手机上拍照已经成为可能。在下面,我将讲解Web App如何用手机进行拍照,显示在页面上并上传到服务器。
1、 视频流
HTML5 The Media Capture API提供了对摄像头的可编程访问,用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签,并将从摄像头获得视频作为这个标签的输入来源(请注意目前仅Chrome和Opera支持getUserMedia。补充:请使用Opera支持HTML5的新版本,如果是Chrome,版本需为Chrome 18.0.1008+,并使用about:flags来开启WebRTC,请看下图)。
var video_element = document.getElementById('video');
if (navigator.getUserMedia) { // opera should use opera.getUserMedia now, chrome use webkitGetUserMedia
navigator.getUserMedia('video',success, error);
}
function success(stream) {
video_element.src =stream;
}
视频流2、 拍照
拍照功能,我们采用HTML5的Canvas实时捕获Video标签的内容,Video元素能作为Canvas图像的输入,这一点很棒。主要代码如下:
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;// atob decodes a string of data which has been encoded using base-64 encoding
第二种:是在后端获取传输的数据后用后台语言截取22位以后的字符串。例如PHP里:
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
4、 图片上传
在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时:
$.post('upload.php',{ 'data' : data } );
在后台我们用PHP脚本接收数据并存储为图片。
function convert_data($data){
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
save_to_file($image);
}
function save_to_file($image){
$fp = fopen($filename, 'w');
fwrite($fp, $image);
fclose($fp);
}
请注意,以上的解决方案不仅能用于Web App拍照上传,并且你可以实现把Canvas的输出转换为图片上传的功能。这样你可以使用Canvas为用户提供图片编辑,例如裁剪、上色、涂鸦的画板功能,然后把用户编辑完的图片保存到服务器上。
Canvas涂鸦功能
在HTML5的驱动下,Web App与Native App之间是否还有不可逾越的鸿沟?我将会在3月23日百度开发者大会上现场来解答这个问题,敬请期待。
相关规范:
相关The Media Capture示例:
原创文章,转载请标明出处:蒋宇捷的专栏
html5拍照上传 java_如何使用HTML5实现拍照上传应用相关推荐
- php一次上传多张图片,html5 multiple的使用。
本文为博主原创,转载请声明. 这是我在这里的第一篇博客,之所以在这里写博,是因为这个网站的好多技术博客帮助了我,谢谢.那么cnblog不支持markdown吗?好像"那么"这个关联 ...
- php 编辑器 插入视频,苗景云的博客-PHPCMS V9编辑器中新增上传mp4视频(上传视频并插入HTML5的video标签)的功能...
由于PHPCMS v9默认的编辑器中上传的视频插入的是embed标签使用的是flash播放器,手机端无法播放,所以来改造下,让其上传视频并插入HTML5的video标签,这样电脑端的主流浏览器和手机端 ...
- 大视频上传服务器,支持HTML5断点续传,支持4GB以上大视频文件上传
当前,我们正处于一个视频爆炸的时代,高清智能手机人人都有,各种场景下的视频应用越来越多,4K高清视频正在普及,视频文件尺寸动辄几个GB.当我们需要和他人分享这些大视频时,视频的上传和断点续传文件立马出 ...
- [html] html5点击返回键怎样不让它返回上一页?
[html] html5点击返回键怎样不让它返回上一页? $(function() {if (window.history && window.history.pushState) { ...
- [html] html5点击返回键怎样不让它返回上一页
[html] html5点击返回键怎样不让它返回上一页 $(function() {if (window.history && window.history.pushState) {$ ...
- 基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js
在线演示 下载 WebRTC可能是明年最受关注的HTML5标准了,Mozilla为此开发了一套帮助你控制硬件的API,例如,摄像头,麦克风,或者是加速表.你可以不依赖其它的插件来调用你需要的本机硬件 ...
- html绘制城堡,网页上的虚幻3,HTML5版《史诗城堡》体验
拼 命 加 载 中 ... Mozilla一直致力于HTML5的发展.在去年发布Android版Firefox浏览器后,Mozilla便发布了基于HTML5开发.并支持所有HTML5应用的Firefo ...
- HTML5学堂,感谢您一年的陪伴(上)
在HTML学堂将满一周岁之际,感谢再过去的一年里支持和关注它的每一个小伙伴.有了你们的支持,HTML5学堂才能更好的走下去.我们将会把这一年的积累重新体现在HTML5学堂的官网上.HTML5学堂将会全 ...
- HTML5期末大作业:订餐系统网站设计——绿色的网上订餐系统(23个页面) 网页作品 订餐系统网页设计作业模板 学生网页制作源代码下载
HTML5期末大作业:订餐系统网站设计--绿色的网上订餐系统(23个页面) 网页作品 订餐系统网页设计作业模板 学生网页制作源代码下载 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. ...
最新文章
- [NC21228]货币系统
- C# 常用正责表达式
- ADT,Eclipse启动时在Android SDK Content Loader0%无法编译
- 图解VC++ opengl环境配置和几个入门例子
- Linux环境下使用dosemu写汇编
- 【学习笔记】5、Python基础语法
- “模板类与友元”那些事(C++)
- 《openssl 编程》之 DH
- 【HDU - 1281 】棋盘游戏 (经典的二分图匹配,匈牙利算法,枚举删除顶点,必须边,关建边)
- 神经网络优化(二) - 滑动平均
- Adobe全系软件下载安装工具 CCMaker 1.3.6
- python 绘制堆积柱状图
- USB Host读取U盘成功
- java基础试题_Java基础测试题带答案
- 折腾BIOS,改开机logo图标
- 现浇板弹性计算还是塑性计算_双向板按弹性方法还是按塑性方法计算
- C++有序map和无序unordered_map性能测试对比
- 网易云音乐怎样下载mp3格式的音乐
- Python: 使用xlrd读取Excel文件
- Verilog——Chipscope简单实用的使用方法(基于ISE14.7 )
热门文章
- sysctl: 深入使用Linux的必经之路
- select模型详解
- 自适应中值滤波及实现
- python numpy矩阵索引_python-为什么scipy csr矩阵的行索引比numpy数组...
- Memcached主从复制+keepalived高可用架构
- UGUI组件之Canvas 组件简单笔记
- 无线通信领域:技术整合,创造未来
- webpack快速构建项目
- nfs漏洞修复(showmount -e)
- 解决docker中/etc/default/docker配置DOCKER_OPTS 失效问题