今天做手机网站,想实现手机扫描二维码功能。首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析。
首先实现在浏览器中调用摄像头,当然用现在火的不行的html5,html5中的<video>标签,并将从摄像头获得视频作为这个标签的输入来源。实现拍照功能的html5代码:
<article> <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> <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> </article>
经本人测试在android手机的opera浏览器浏览器下可以正常实现手机拍照功能。android手机下的google chrome浏览器还不行,自带的浏览器也测试没有通过。iphone手机的safari浏览器也是不支持的。
想了解更多关于html5调用手机摄像头的内容可以点击http://dev.w3.org/2011/webrtc/editor/getusermedia.html。
图片的获取:
下面我们要从Canvas获取图片数据,其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像,类似于“data:image/png;base64,xxxxx”的格式。
Html代码
var imgData =canvas.toDataURL("image/png");
因为真正图像数据是base64编码逗号之后的部分,所以我们实际服务器处理的图像数据应该是这部分,我们可以用两种办法来获取。
第一种:是在前端截取22位以后的字符串作为图像数据,例如:
Html代码
var data = imgData.substr(22);
如果要在上传前获取图片的大小,可以使用:
Html代码
var length = atob(data).length;// atob decodes a string of data which has been encoded using base-64 encoding
第二种:是在后端获取传输的数据后用后台语言截取22位以后的字符串。例如PHP里
php代码:
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
图片上传:
在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时:
js代码
$.post('upload.php',{ 'data' : data } );
在后台我们用PHP脚本接收数据并存储为图片。
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为用户提供图片编辑,例如裁剪、上色、涂鸦的画板功能,然后把用户编辑完的图片保存到服务器上。
相关推荐
混合App开发,原生壳子+webApp,在web部分调用原生摄像头功能并且在网页指定区域显示摄像头内容,同时可以手动拍照并进行人脸识别,将识别结果显示在网页上。 技术栈 vue、Html5、video标签、Android、IOS、百度AI ...
摄像头控件用于在Web编程中辅助您完成图像采集、截图,并上传到服务器当中,支持USB外置摄像头、内置摄像头及部分型号高拍仪设备. 该摄像头控件工作在客户端浏览器中,支持多种服务器端编程技术及部署环境,支持...
HTML5实现利用摄像头拍照上传功能,包括拍照和上传。。。
HTML5+Canvas+jQuery调用手机拍照功能,本地压缩上传图片。以上都是测试通过了的。
在html5网页中实现用手机相机拍照功能,并上传照片给后台.zip
本项目是一个html5调用本地摄相头拍照上传相片的示例代码,项目很少,代码简单,应该一看就会的,需要用chrome浏览器或opern浏览器,版本要高一些才行。
html5 用canvas video标签调用摄像头拍照ajax java实现上传
h5调用摄像头拍照,并获取base64码,用hbuilder 封装app后 开启录音,相机,媒体等权限
代码只是关键代码,并不能直接使用,可以拷贝到javaweb项目中使用
html下调用电脑摄像头,利用jQuery-webcam-master这个框架,但是目前只支持320 * 240,如果需要调整尺寸,需要修改swf源码。这个还没弄明白。(本来想0分上传的,奈何没有)
兼容多浏览器,IE8,9,10,11,edge,chrome,ff等 兼容flash,html5,需要安装adobe flash player
html5视频前端视频上传,手机拍照上传,手机录像上传。HLMT5中input实现多种文件上传,视频上传,图片上传,调用手机摄像头,照相机,相册等功能。
当accept=”audio/或video/”时capture只有两种值,一种是user,用于调用面向人脸的摄像头(例如手机前置摄像头),一种是environment,用于调用环境摄像头(例如手机后置摄像头)。 当accept=”audio”时,只要有...
这是在AngularJs中成功实现调用摄像头拍照并截图上传的例图: 2. 如何调用摄像头 $scope.photoErr = false; $scope.photoBtnDiable = true; var mediaStream = null,track = null; navigator.getMedia = ...
html5+js+php实现调用摄像头拍照并压缩图片上传到服务器。
在react中使用JavaScript结合html5通过video标签来实现拍照图片保存实现拍照和图片转换
调用本地摄像头,可以进行拍照上传,判断当前浏览器是否支持html5的getUserMedia,不支持则以flash方式打开摄像头,多种浏览器测试过都可用。必须采用http的打开方式(发布到服务器)。自己可以修改代码,简单方便。