今天做手机网站,想实现手机扫描二维码功能。首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析。

首先实现在浏览器中调用摄像头,当然用现在火的不行的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为用户提供图片编辑,例如裁剪、上色、涂鸦的画板功能,然后把用户编辑完的图片保存到服务器上。

html5调用手机摄像头,实现拍照上传功能的更多相关文章

  1. 怎样让HTML5调用手机摄像头拍照——实践就是一切

    原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...

  2. 使用HTML5+调用手机摄像头和相册

    前言:前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法简 ...

  3. HTML5调用手机摄像头,仅仅支持OPPOHD浏览器

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. html5调用手机相机并压缩、上传

    近日刚做的一个功能,要在app里使用内嵌页面进行图像的上传.从功能上看,原生的实现应该是最好的.毕竟页面上所有的东西都隔着一个浏览器,所有的实现都要依赖浏览器提供的接口,不同的浏览器对接口的实现又有差 ...

  5. Ionic Cordova 调用原生 Api 实现拍照上传 图片到服务器功能

    Ionic 调用 Device 设备 Api 获取手机的设备信息 1. 找到对应的Api: https://ionicframework.com/docs/native/device/ 2. 安装相关 ...

  6. html5调用手机摄像头

    <input type="file" accept="image/*" capture="camera"><input t ...

  7. getUserMedia API及HTML5 调用手机摄像头拍照

    getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...

  8. html5调用手机摄像头(图片可多选 限pc)

    html5自带的 input file=”” ,纯html5,并且不涉及到js ,就可以实现.代码如下: <input type="file" accept="im ...

  9. HTML5 APP应用实现图片上传及拍照上传功能

    https://blog.csdn.net/zmzwll1314/article/details/46965663 http://www.cnblogs.com/leo0705/ https://zh ...

随机推荐

  1. Product of Array Exclude Itself

    Given an integers array A. Define B[i] = A[0] * ... * A[i-1] * A[i+1] * ... * A[n-1], calculate B WI ...

  2. POJ 2386

    http://poj.org/problem?id=2386 这个题目与那个POJ 1562几乎是差不多的,只不过那个比这个输入要复杂一些 #include <stdio.h> #incl ...

  3. 2.11 2D平面最近点对问题[closest pair problem]

    [本文链接] http://www.cnblogs.com/hellogiser/p/closest-pair-problem.html [题目] 给定平面上N个点的坐标,找出距离最近的两个点之间的距 ...

  4. Android dp px转化公式

    // DisplayMetrics metrics = getResources().getDisplayMetrics(); // int statusBarHeight = (int) Math. ...

  5. Java中必须了解的常用类

    1.Java的包装类 基本数据类型我们都很熟悉,例如:int.float.double.boolean.char等,基本数据类型不具备对象的特征,不能调用方法,一般能实现的功能比较简单,为了让基本数据 ...

  6. Java删除文件夹和文件

    转载自:http://blog.163.com/wu_huiqiang@126/blog/static/3718162320091022103144516/ 以前在javaeye看到过关于Java操作 ...

  7. HDU1004 查气球

    Let the Balloon Rise Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Oth ...

  8. JavaScript、Jquery选择题

    尚学堂Java EE软件工程师认证考试 试题库-选择题     一.    选择题(包括单选和双选) 1.B 在JavaScript中,以下变量命名非法的是(   )(选择一项) A. numb_1 ...

  9. Java Hour 10

    有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. 本文作者Java 现经验约为10 Hour,请各位不吝赐教. Hour 10 ...

  10. 不能继承OrmLiteBaseActivity时,这样获取getHelper

    private DatabaseHelper databaseHelper = null; public DatabaseHelper getHelper() { if (databaseHelper ...