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

简介: 最近一个需求就是做一个二维码扫描的功能,但是又不想使用安卓APP的方式实现,百度了一下貌似HTML5可以实现。项目使用环境以及工具:Eclipse,JDK1.7,struts2,HTML5,Jquery,QRCode 引用 HTML5技术支持WebApp在手机上拍照,显示在页面上并上传到服务器。这是手机微博应用中常见的功能,当然你也可以在其它类型应用中适当使用此技术。 这个功
最近一个需求就是做一个二维码扫描的功能,但是又不想使用安卓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  () {
         var  video = document.getElementById( "video" ), 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(
                 "video" true  },
                 function  (stream) {
                     if  (video.mozSrcObject !== undefined)video.mozSrcObject = stream;
                     else  video.src = ((window.URL || window.webkitURL || window.mozURL || window.msURL) && window.URL.createObjectURL(stream)) || stream;               
                     video.play();
                 },
                 function  (error) {
                     alert( "请检查是否开启摄像头" );
                     flag =  false ;
                 }
             );
         else  alert( "Native device media streaming (getUserMedia) not supported in this browser" );
        
         setInterval( function  () {
                 if (!flag){
                         return ;
                 }
             context.drawImage(video, 0, 0, canvas.width = video.videoWidth, canvas.height = video.videoHeight);
                     var  image = canvas.toDataURL( "image/png" ).replace( "data:image/png;base64," "" ); 
             $.ajax({
                                 url :  'qRCodeAction_decoderQRCode.action' ,
                                 async :  false ,
                                 type :  'post' ,
                                 data : {
                                         'time'  : ( new  Date()).toString(),
                                         'img'  : image
                                 },
                                 success :  function (result) {
                                           
                                 },
                     });
         }, 5000);
     },  false );
  </script> 

后台部分代码:
Java code
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
          * 解析二维码
          */
         public  String decoderQRCode(){
                 try  {
                         String realpath = ServletActionContext.getServletContext().getRealPath( "/file" );
                         SimpleDateFormat sdf =  new  SimpleDateFormat( "yyyyMMddHHmmss" );
                         String imgName = sdf.format( new  Date()) +  ".png" ;
                         String filePath = realpath+Constants.SF_FILE_SEPARATOR+imgName;
                         OutputStream out =  new  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
目录
相关文章
|
6天前
|
开发工具 git
【HTML】两个实战项目
【HTML】两个实战项目
10 2
|
6天前
|
移动开发 前端开发 HTML5
HTML5实现酷炫个人产品推广、工具推广、信息推广、个人主页、个人介绍、酷炫官网、门户网站模板源码
HTML5实现酷炫个人产品推广、工具推广、信息推广、个人主页、个人介绍、酷炫官网、门户网站模板源码
|
6天前
生日快乐祝福HTML源码
2024生日快乐祝福HTML源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面
15 0
生日快乐祝福HTML源码
|
6天前
好看的html网站维护源码
好看的html网站维护源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,
23 3
好看的html网站维护源码
|
6天前
|
移动开发 前端开发 HTML5
HTML5 Canvas发光Loading源码
一款基于HTML5 Canvas的发光Loading加载HTML源码。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果
15 1
HTML5 Canvas发光Loading源码
|
6天前
|
移动开发 JSON 前端开发
HTML5作业(四)-----饼状图和柱状图绘制【附源码】
该实验旨在熟悉HTML5 Canvas绘制图形和表单交互。用户需输入统计数据,程序将依据数据绘制饼状图和柱状图。要求验证用户输入有效性,点击按钮可切换图表类型,图上需显示数据标注。提供的代码包含一个表单用于输入JSON数据,两个绘制函数(drawPieChart、drawBarChart)用于生成饼状图和柱状图,以及输入验证和颜色生成辅助函数。
|
6天前
|
移动开发 HTML5
高大上HTML5引导页源码 动态效果更好看
高大上HTML5引导页源码 动态效果更好看,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,
23 0
高大上HTML5引导页源码 动态效果更好看
|
6天前
|
前端开发 UED
【专栏:HTML与CSS实战项目篇】创建一个具有复杂布局的电商详情页
【4月更文挑战第30天】构建复杂布局的电商详情页涉及页面结构规划、样式设计和交互效果实现。首先规划顶部导航栏、商品图片展示区、商品信息区、用户评价区和相关商品推荐区。在样式设计上,注重色彩搭配、字体选择、布局与间距及图片处理。交互效果包括图片放大、添加到购物车按钮、滚动监听和评论互动,以提升用户体验。实际开发中需考虑跨设备兼容性和用户体验优化。
|
6天前
|
移动开发 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先,简述HTML5用于构建网页内容,CSS3用于描述样式。接着,分四步展示实现过程:1) 设计包含输入框和提示信息的表单结构;2) 使用CSS3创建样式,增强视觉效果;3) 使用JavaScript监听输入事件,动态验证表单并显示错误信息;4) 测试和调试确保跨平台兼容性。通过学习,开发者能掌握创建带验证功能的表单,提升用户体验。
|
6天前
|
前端开发 测试技术 UED
【专栏:HTML 与 CSS 实战项目篇】实现一个在线产品展示页面
【4月更文挑战第30天】本文介绍了使用HTML和CSS创建吸引人的在线产品展示页面的实战步骤,包括页面设计规划、HTML结构搭建、CSS样式设计、具体页面实现、交互效果添加、优化与提升。通过简洁布局、产品列表和详情页设计,实现易用且具吸引力的展示效果。优化图片和代码,提升性能,以助企业在数字时代脱颖而出。