分类导航

HTML5 发布时间：2022-04-25 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了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 解析图片获取二维码信息。
前台部分代码：

1

@H_450_56@ 2

 
        <video  id= 
        "video" 
        > 
       

 
        <script> 
       

 
        var  
        flag =  
        true 
        ;

 
             
        window.addEventListener( 
        "DOMContentLoaded" 
        ,  
        function  
        () { 
       

 
        video = document.getElementById( 
        ), canvas, context;

 
        try  
        {

 
        canvas = document.createElement( 
        "canvas" 
        );

@H_419_237@ 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)

@H_135_262@ navigator.getUserMedia(

@H_301_299@ (stream) {

 
        (video.mozSrcObject !== undefined)video.mozSrcObject = stream;

@H_944_293@ else

video.src = ((window.URL || window.webkitURL || window.mozURL || window.msURL) && window.URl.createObjectURL(stream)) || stream;

 
        video.play();

 
        (error) { 
       

@H_616_312@ 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); 
       

@H_502_388@ image = canvas.toDataURL( "image/png" ).replace( "data:image/png;base64," "" );

@H_885_403@ $.ajax({

 
                                         
        url :  
        'qRCodeAction_decoderQRCode.action' 
        async :  
        type :  
        'post' 
        data : { 
       

 
        'time'  
        : ( 
        new  
        Date()).toString(),

 
        'img'  
        : image

 
        success :  
        function 
        (result) { 
       

});

);

 
        </script>

大佬总结

以上是大佬教程为你收集整理的AVA整合HTML5实现扫描二维码功能项目源码全部内容，希望文章能够帮你解决AVA整合HTML5实现扫描二维码功能项目源码所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：5 ava html html5 二维功能实现扫描整合源码码项目