JS实现网页二维码扫描功能

最近接到一个任务，实现网页版的二维码扫描，刚开始以为会很简单，没想到大意失荆州，网上的教程资料很多，可是可以用的不多，所幸我最终做了出来，所以分享给大家，大家一起进步。

代码

HTML部分代码

<html><head><meta charset="utf-8" /><title>Scanner</title><script src="jquery.min.js"></script><script src="jsQR.js"></script></head><body><canvas id="qr-canvas" width="800" height="600"></canvas><video id="v" autoplay></video><script type="text/javascript" src="qrcode.js"></script><script type="text/javascript" src="scan.js"></script></body>
</html>

共通JS文件路径

https://gitee.com/kedu666/scanner/blob/master/JS/jquery.min.js
https://gitee.com/kedu666/scanner/blob/master/JS/jsQR.js
https://gitee.com/kedu666/scanner/blob/master/JS/qrcode.js

scan.js的代码

   //是否成功调用getUserMedia标识var gUM=false;//画布getContext对象var gCtx = null;// 数据流对象var imageData =null;//视频展示对象var v=document.getElementById("v");var n=navigator;// 画布元素var gCanvas = document.getElementById("qr-canvas");gCtx = gCanvas.getContext('2d');qrcode.callback = function(e){//结果回调alert(e);}//不同getUserMedia处理if(n.getUserMedia){// 移动设备打开后置摄像头【 facingMode: "environment"】 n.getUserMedia({video: { facingMode: "environment"}}, success, error);}elseif(n.mediaDevices.getUserMedia){n.mediaDevices.getUserMedia({video: { facingMode: "environment"} , audio: false}).then(success).catch(error);}elseif(n.webkitGetUserMedia){webkit=true;n.webkitGetUserMedia({video:{ facingMode: "environment"}}, success, error);}elseif(n.mozGetUserMedia){moz=true;n.mozGetUserMedia({video: { facingMode: "environment"}}, success, error);}//getUserMedia调用成功function success(stream) {             v=document.getElementById("v");   try{v.srcObject = stream;}catch{//这里是兼容写法let compatibleURL = window.URL || window.webkitURL;v.src = compatibleURL.createObjectURL(stream);}gUM=true;setTimeout(captureToCanvas, 500);}//getUserMedia调用失败function error(error) {gUM=false;return;}//将视频流放到画布
function captureToCanvas() {if(gUM){gCtx.drawImage(v,0,0);setTimeout(captureToCanvas, 500);imageData = gCtx.getImageData(0,0,600,800);const code = jsQR(imageData.data, imageData.width, imageData.height, {inversionAttempts: "dontInvert",});alert('code.data:'+code.data);if(code){window.location.href = code.data;}else{alert("识别错误")}}}

代码运行步骤

第一步：将这些文件下载到本地文件夹
第二步：将文件见打包成.zip压缩包
第三步：通过微信上传到移动端，
第四步：通过zip压缩工具将文件解压缩
第五步：以浏览器的形式打开html文件，打开的同时将启用摄像头
第六步：对准提前准备好的二维码图片进行扫描。

由于本人一直从事数据库后端开发，对前端了解不多，所以页面比较简陋，但是基本功能实现了，希望这些代码对正在进行二维码扫描开发的朋友们有帮助，有问题可以给我留言，我们一起探讨，一起进步。

JS实现网页二维码扫描功能相关推荐

MUI 结合 HTML5+ 实现的二维码扫描功能
扫码登录的实现原理原理解释: 接下来就是对于这个服务的详细实现.首先,大概说一下原理:用户打开网站的登录页面的时候,向浏览器的服务器发送获取登录二维码的请求.服务器收到请求后,随机生成一个uuid, ...
基于MUI框架的使用HTML5+实现的二维码扫描功能
Barcode的一个实现案例一.简介 Barco ...
Android项目如何集成ZXing二维码扫描功能
最近的项目有二维码扫描跳转网页的需求,就是利用手机摄像头,扫描并解析二维码内容,内容由生成二维码的时候定义,我项目现在的需求就是一个包含了网址的二维码,网上有生成二维码的工具,也可以自己开发一个. 搜 ...
iOS 自带二维码扫描功能的实现
#自从iOS7以后中新增了二维码扫描功能.因此可以在不借助第三方类库的情况下简单的写出二维码的扫描功能: 原生的二维码扫描功能在AVFoundation框架下,所以在使用原生的二维码扫描功能时要先导入 ...
chroom浏览器网页二维码生成功能的方法
谷歌浏览器二维码生成功能在没有二维码的时候,我们如果要将电脑网页端的内容分享到移动端时,通常会复制内容,然后在粘贴到第三方通讯工具(微信.QQ)上发送给手机其实早在Chrome85桌面端就上线网页 ...
Android实现二维码扫描功能（四）-ZXing识别图片二维码，相册选图
简介上一篇 Android实现二维码扫描功能(三)-闪光灯控制介绍了光线较弱情况下开启闪光灯来辅助二维码识别的方法. 本篇我们介绍如何识别相册中的图片(含二维码) 动态演示使用模拟器录制了动画演示 ...
JavaCV/OpenCV 二维码扫描功能
JavaCV/OpenCV 二维码扫描功能怎样配置工程就不再赘述,不清楚的读者可以网上查找资料,二维码扫描功能通过JavaCV实现起来还是挺简单的,主要OpenCV中QRCodeDetector提供 ...
Android实现二维码扫描功能-ZXing识别图片二维码，相册选图
文章目录 1.演示 2.权限问题 3.实现步骤 4.工具类 5.图片Uri处理(重要更新) 1.演示 2.权限问题部分朋友在打开相册时遇到读写权限未授权的问题,我在开发的时候没有遇到,也没有注册读写 ...
Flutter 3.X二维码扫描功能
Flutter 3.X二维码扫描功能 1. pubspec.yaml文件添加依赖 2使用 3. 源代码 4.第二种方式 4.1 pubspec.yaml文件添加依赖 4.2 使用源代码 1. pub ...
使用安卓实现一个二维码扫描功能（基于Android Studio）
二维码扫描使用很广泛,在这里记录二维码扫描的功能,需要导入第三方的类库. 步骤一:在项目中导入第三方的类库,导入方法:往Android Studio中导入第三方类库文件这篇博客中有详细记录步骤二:定 ...

JS实现网页二维码扫描功能

JS实现网页二维码扫描功能

代码

HTML部分代码

共通JS文件路径

scan.js的代码

代码运行步骤

JS实现网页二维码扫描功能相关推荐

最新文章

热门文章