AVA整合HTML5实现扫描二维码功能项目源码

最近一个需求就是做一个二维码扫描的功能,但是又不想使用安卓APP的方式实现,百度了一下貌似HTML5可以实现。

项目使用环境以及工具:
Eclipse,JDK1.7,struts2,HTML5,Jquery,QRCode
引用
HTML5技术支持WebApp在手机上拍照,显示在页面上并上传到服务器。这是手机微博应用中常见的功能,当然你也可以在其它类型应用中适当使用此技术。

这个功能不但手机端可以实现PC端也可以很好的实现,这个应用接口技术就是getUserMedia API,它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头,并提取截屏图形。
一、视频流  
      HTML5 的 The Media Capture(媒体捕捉) API 提供了对摄像头的可编程访问,用户可以直接用 getUserMedia (请注意目前仅Chrome和Opera支持)获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签,并将从摄像头获得的视频作为这个标签的输入来源。
二、拍照
拍照是采用HTML5的Canvas功能,实时捕获Video标签的内容,因为Video元素可以作为Canvas图像的输入,所以这一点很好实现。
三、 获取图片
  从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像,类似于“data:image/png;base64,xxxxx”的格式。
var imgData=canvas.toDataURL(“image/png”);
这样,imgData变量就存储了一长串的字符数据内容,表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分,所以要让实际服务器接收的图像数据应该是这部分,我们可以用两种办法来获取。
  第一种:是在前端截取22位以后的字符串作为图像数据,例如:
var data=imgData.substr(22);
  第二种:就是替换;前面的部分为"";
var image = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");
反正不管如何实现,能获取到图片流即可、
四、上传图片并解析
使用 setInterval定时上传到项目后台使用开源QRCode.jar 解析图片获取二维码信息。
前台部分代码:
JavaScript code
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<video  id= "video" >
<script>
     var  flag =  true ;
     window.addEventListener( "DOMContentLoaded" function  () {
         video = document.getElementById( ), canvas, context;
try  {
             canvas = document.createElement( "canvas" );
canvas.width = 600;
canvas.height = 600;
context = canvas.getContext( "2d" );
         catch  (e) { alert( "not support canvas!" );  return ; }
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
 
if  (navigator.getUserMedia)
navigator.getUserMedia(
                 true  },
                 (stream) {
                     (video.mozSrcObject !== undefined)video.mozSrcObject = stream;
else  video.src = ((window.URL || window.webkitURL || window.mozURL || window.msURL) && window.URL.createObjectURL(stream)) || stream;               
                     video.play();
(error) {
alert( "请检查是否开启摄像头" );
false ;
}
);
"Native device media streaming (getUserMedia) not supported in this browser" );
        
setInterval( () {
if (!flag){
                         ;
}
context.drawImage(video, 0, canvas.width = video.videoWidth, canvas.height = video.videoHeight);
image = canvas.toDataURL( "image/png" ).replace( "data:image/png;base64," "" ); 
$.ajax({
                                 url :  'qRCodeAction_decoderQRCode.action' async :  type :  'post' data : {
                                         'time'  : ( new  Date()).toString(),
'img'  : image
success :  function (result) {
                                           
});
);
  </script> 

后台部分代码:
Java code
?
/**
          * 解析二维码
*/
         public  String decoderQRCode(){
                 try  {
                         String realpath = ServletActionContext.getServletContext().getRealPath( "/file" );
SimpleDateFormat sdf =  new  SimpleDateFormat( "yyyyMMddHHmmss" );
String imgName = sdf.format( Date()) +  ".png" ;
String filePath = realpath+Constants.SF_FILE_SEPARATOR+imgName;
OutputStream out =  FileOutputStream(filePath);
QRCode.GenerateImage(img,out); //生成图片
message   = QRCode.decoderQRCode(filePath);
                 catch  (Exception e) {
e.printStackTrace();
}
return  Action.SUCCESS;
         }

调用电脑拍摄一定要允许操作。现在只需要HTML5的画布技术和javaScript,我们就能简单快速的操作用户的摄像头。手机不仅可以调用摄像头扫描,PC不仅仅能访问摄像头,而且利用HTML5强大的画布技术,我们可以给图片上加入各种迷人的滤镜效果。现在,在浏览器里用自己的摄像头给自己拍张照片吧!



有些手机可能无法调出摄像头,那就赶紧换手机吧,别out了。
附上演示地址: http://monitor.52itstyle.com/index.html
CSDN 下载地址:http://download.csdn.net/detail/zhulin2012/9571624

百度云下载地址:http://pan.baidu.com/s/1slaNMnr

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法