android中html5页面调取系统摄像头
2015-06-03 21:41
597 查看
拍照上传功能一般都用于用户的头像设置和手机端的分享图片,对于PC端的头像设置,如果采用拍照的方式设置,需要用户使用带有摄像头的电脑,不过现在HTML5那么火爆,使用手机端的用户也可以通过网页拍照上传图片,其中使用了html5中的<video>标签,并将从摄像头获得视频作为这个标签的输入来源。
首先我们编写简单的HTML的代码,编写一个<video>标签作为图片的来源,当然还要加入一些描述性的文字,告诉用户如何操作和上传图片,创建一个<canvas>标签用于储存图片。
接下来我们编写JavaScript代码,设置<canvas>的高度和宽度等于<video>的高度和宽度,获取<video>里面的内容,然后绘制到<canvas>里面。
经过测试在android手机的opera浏览器浏览器下可以正常实现手机拍照功能。android手机下的google chrome浏览器还不行,自带的浏览器也测试没有通过。iphone手机的safari浏览器也是不支持的。
下面我们要从Canvas获取图片数据,其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像,类似于“data:image/png;base64,xxxxx”的格式。
因为真正图像数据是base64编码逗号之后的部分,所以我们实际服务器处理的图像数据应该是这部分,我们可以用两种办法来获取。
1、在前端截取22位以后的字符串作为图像数据,例如:
如果要在上传前获取图片的大小,可以使用:
在后端获取传输的数据后用后台语言截取22位以后的字符串。例如PHP里面
在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时:
在后台我们用PHP脚本接收数据并存储为图片。
请注意,以上的解决方案不仅能用于Web App拍照上传,并且你可以实现把Canvas的输出转换为图片上传的功能。这样你可以使用Canvas为用户提供图片编辑,例如裁剪、上色、涂鸦的画板功能,然后把用户编辑完的图片保存到服务器上。
参考文章:http://www.glve.net/html5-calls-cell-phone-cameras-to-achieve-photo-upload-feature.html
HTML代码
首先我们编写简单的HTML的代码,编写一个<video>标签作为图片的来源,当然还要加入一些描述性的文字,告诉用户如何操作和上传图片,创建一个<canvas>标签用于储存图片。<style scoped> video { transform: scaleX(-1); } p { text-align: center; } </style> <h1>Snapshot Kiosk</h1> <section id="splash"> <p id="errorMessage">Loading...</p> </section> <section id="app" hidden> <p><video id="monitor" autoplay></video> <canvas id="photo"></canvas> <p><input type=button value="📷" onclick="snapshot()"> </section>
JavaScript代码
接下来我们编写JavaScript代码,设置<canvas>的高度和宽度等于<video>的高度和宽度,获取<video>里面的内容,然后绘制到<canvas>里面。<script> navigator.getUserMedia({video:true}, gotStream, noStream); var video = document.getElementById('monitor'); var canvas = document.getElementById('photo'); function gotStream(stream) { video.src = URL.createObjectURL(stream); video.onerror = function () { stream.stop(); }; stream.onended = noStream; video.onloadedmetadata = function () { canvas.width = video.videoWidth; canvas.height = video.videoHeight; document.getElementById('splash').hidden = true; document.getElementById('app').hidden = false; }; } function noStream() { document.getElementById('errorMessage').textContent = 'No camera available.'; } function snapshot() { canvas.getContext('2d').drawImage(video, 0, 0); } </script>
经过测试在android手机的opera浏览器浏览器下可以正常实现手机拍照功能。android手机下的google chrome浏览器还不行,自带的浏览器也测试没有通过。iphone手机的safari浏览器也是不支持的。
获取图片
下面我们要从Canvas获取图片数据,其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像,类似于“data:image/png;base64,xxxxx”的格式。var imgData =canvas.toDataURL("image/png");
因为真正图像数据是base64编码逗号之后的部分,所以我们实际服务器处理的图像数据应该是这部分,我们可以用两种办法来获取。
1、在前端截取22位以后的字符串作为图像数据,例如:
var data = imgData.substr(22);
如果要在上传前获取图片的大小,可以使用:
var length = atob(data).length;
在后端获取传输的数据后用后台语言截取22位以后的字符串。例如PHP里面
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
上传图片
在前端可以使用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为用户提供图片编辑,例如裁剪、上色、涂鸦的画板功能,然后把用户编辑完的图片保存到服务器上。
参考文章:http://www.glve.net/html5-calls-cell-phone-cameras-to-achieve-photo-upload-feature.html
相关文章推荐
- 【转】android开源项目---developer篇
- 【转】android开源项目---项目篇
- android开源项目---tool篇
- android开源项目---View篇
- Android 通过名称获取资源ID
- Android基础系列-----------Android系统启动过程简析
- Android中FTP上传、下载
- android property 使用限制
- 解决Your content must have a ListView whose id attribute is 'android.R.id.list'
- Android的进程优先级
- android_sensor
- android_NFC
- android之cannot convert from Fragment1 to Fragment
- Android开发之MediaRecorder类详解
- 史上最简单android动画之frame by frame(帧动画)
- Android横竖屏切换小结
- Android 读取手机SD卡根目录下某个txt文件的文件内容
- android使用ant自动打包(包括更改文件中的内容)
- Android 命令生成签名keystore、ant编译打包流程
- Ant自动编译打包android项目