- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
在数字化时代,二维码已经渗透到我们生活的方方面面。从移动支付到产品溯源,二维码凭借其便捷性和高效性,成为了信息传递的重要载体。而随着前端技术的不断发展,我们甚至可以使用 JavaScript 在网页端实现二维码扫描功能,为用户提供更加便捷的操作体验.
本文将带您深入了解如何使用 JavaScript 调用摄像头,结合 jsQR 库,以及如何控制闪光灯,最终实现一个功能完善的网页扫码应用.
我们将创建一个简单的网页应用,该应用能够:
jsQR
库解码扫描区域内的二维码图像数据,获取二维码内容。首先,我们需要构建基本的 HTML 结构,包括:
<video>
标签:用于展示摄像头捕获的实时视频流。<canvas>
标签:用于绘制视频帧和扫描区域,并从中获取图像数据。<div>
标签:用于创建扫描区域、按钮组等 UI 元素。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>扫一扫</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<video id="video" autoplay></video>
<canvas id="overlay" hidden></canvas>
<div class="scan-area"></div>
<div class="btn-group">
<button id="manualInputBtn">手动输入</button>
<button id="flashBtn">闪光灯</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
<script src="script.js"></script>
</body>
</html>
为了提升用户体验,我们需要为页面元素添加一些样式:
/* style.css */
body {
margin: 0;
overflow: hidden;
}
#video {
width: 100%;
height: auto;
display: block;
}
#overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.scan-area {
border: 3px solid yellow;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 30%;
}
/* ...其他样式 */
JavaScript 代码是实现扫码功能的核心部分,主要包括以下几个步骤:
获取摄像头权限: 使用 navigator.mediaDevices.getUserMedia() 方法请求访问用户的摄像头.
播放视频流: 将获取到的视频流赋值给 <video> 标签的 srcObject 属性,并调用 video.play() 方法开始播放.
创建扫描循环: 使用 requestAnimationFrame() 方法创建一个循环,不断地从视频流中获取帧图像,并进行二维码解码.
绘制视频帧: 在每一帧中,使用 canvas.drawImage() 方法将视频帧绘制到 <canvas> 元素上.
获取扫描区域图像数据: 使用 canvas.getImageData() 方法获取扫描区域的图像数据.
解码二维码: 使用 jsQR 库的 jsQR() 方法解码图像数据,如果解码成功,则获取二维码内容.
处理扫描结果: 对解码后的二维码内容进行处理,例如跳转到链接、显示信息等.
实现其他功能: 实现手动输入二维码内容和控制闪光灯等功能.
// script.js
const video = document.getElementById('video');
const overlay = document.getElementById('overlay');
const manualInputBtn = document.getElementById('manualInputBtn');
const flashBtn = document.getElementById('flashBtn');
const scanArea = document.querySelector('.scan-area');
let stream;
let scanning = false;
let flashEnabled = false;
// 获取摄像头权限并开始播放视频流
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
.then(s => {
stream = s;
video.srcObject = stream;
video.play();
// 开始扫描
scanning = true;
requestAnimationFrame(scan);
})
.catch(err => {
console.error("无法访问摄像头:", err);
});
// 扫描二维码
function scan() {
if (scanning) {
const canvas = overlay.getContext('2d');
const videoWidth = video.videoWidth;
const videoHeight = video.videoHeight;
// 设置画布大小
overlay.width = videoWidth;
overlay.height = videoHeight;
// 将视频帧绘制到画布上
canvas.drawImage(video, 0, 0, videoWidth, videoHeight);
// ...获取扫描区域图像数据
// 使用 jsQR 库解码二维码
const code = jsQR(imageData.data, imageData.width, imageData.height);
// 如果成功解码,则停止扫描并处理结果
if (code) {
scanning = false;
handleScanResult(code.data);
} else {
requestAnimationFrame(scan);
}
}
}
// 处理扫描结果
function handleScanResult(data) {
alert("扫描结果:" + data);
// 这里可以根据扫描结果进行相应的操作,例如跳转到链接或显示信息
}
// 手动输入按钮点击事件
manualInputBtn.addEventListener('click', function() {
// ...
});
// 闪光灯按钮点击事件
flashBtn.addEventListener('click', function() {
// ...
});
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>扫一扫</title> <style> body { margin: 0; overflow: hidden; } #video { width: 100%; height: auto; display: block; } #overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .scan-area { border: 3px solid yellow; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 30%; } .btn-group { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } button { background-color: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 10px 20px; margin: 0 10px; border-radius: 5px; font-size: 16px; cursor: pointer; } </style> </head> <body> <video id="video" autoplay></video> <canvas id="overlay" hidden></canvas> <div class="scan-area"></div> <div class="btn-group"> <button id="manualInputBtn">手动输入</button> <button id="flashBtn">闪光灯</button> </div> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script> <script> const video = document.getElementById('video'); const overlay = document.getElementById('overlay'); const manualInputBtn = document.getElementById('manualInputBtn'); const flashBtn = document.getElementById('flashBtn'); const scanArea = document.querySelector('.scan-area'); let stream; let scanning = false; let flashEnabled = false; // 获取摄像头权限并开始播放视频流 navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }) .then(function(s) { stream = s; video.srcObject = stream; video.play(); // 开始扫描 requestAnimationFrame(scan); }) .catch(function(err) { console.error("无法访问摄像头:", err); }); // 扫描二维码 function scan() { if (scanning) { const canvas = overlay.getContext('2d'); const videoWidth = video.videoWidth; const videoHeight = video.videoHeight; // 设置画布大小 overlay.width = videoWidth; overlay.height = videoHeight; // 将视频帧绘制到画布上 canvas.drawImage(video, 0, 0, videoWidth, videoHeight); // 获取扫描区域的坐标和尺寸 const scanAreaRect = scanArea.getBoundingClientRect(); const scanAreaX = scanAreaRect.left; const scanAreaY = scanAreaRect.top; const scanAreaWidth = scanAreaRect.width; const scanAreaHeight = scanAreaRect.height; // 获取扫描区域的图像数据 const imageData = canvas.getImageData(scanAreaX, scanAreaY, scanAreaWidth, scanAreaHeight); // 使用 jsQR 库解码二维码 const code = jsQR(imageData.data, imageData.width, imageData.height); // 如果成功解码,则停止扫描并处理结果 if (code) { scanning = false; handleScanResult(code.data); } else { requestAnimationFrame(scan); } } } // 处理扫描结果 function handleScanResult(data) { alert("扫描结果:" + data); // 这里可以根据扫描结果进行相应的操作,例如跳转到链接或显示信息 } // 手动输入按钮点击事件 manualInputBtn.addEventListener('click', function() { const input = prompt("请输入二维码内容:"); if (input) { handleScanResult(input); } }); // 闪光灯按钮点击事件 flashBtn.addEventListener('click', function() { if ('torch' in navigator.mediaDevices.getUserMedia({ video: true })) { flashEnabled = !flashEnabled; stream.getVideoTracks()[0].applyConstraints({ advanced: [{ torch: flashEnabled }] }); // 更新按钮文本 flashBtn.textContent = flashEnabled ? '关闭闪光灯' : '闪光灯'; } else { alert('您的设备不支持闪光灯功能。'); } }); // 开始扫描 scanning = true; </script> </body> </html>
通过以上步骤,我们成功地使用 JavaScript 在网页端实现了二维码扫描功能。该功能可以广泛应用于各种场景,例如:
随着 Web 技术的不断发展,相信未来会有更多创新的应用场景出现.
希望本文能够帮助您了解网页扫码功能的实现原理,并激发您探索更多前端黑科技的兴趣.
最后此篇关于前端黑科技:使用JavaScript实现网页扫码功能的文章就讲到这里了,如果你想了解更多关于前端黑科技:使用JavaScript实现网页扫码功能的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
1. HTML 结构 1.1 HTML 文件基本结构 第一个html程序 hello world! html 标签是整个 h
文件上传三种方案:1. form表单上传,2. iframe,3. FormData,base64上传文件,二进制流上传文件,二进制流下载文件。异步上传,大文件上传--切片:拆分上传请求断点续传显示上
1. HTML 结构 1.1 HTML 文件基本结构 第一个html程序 hello world! html 标签是整个 h
uniapp作为开发移动端的前端框架,目前国内是非常流行的,使用HbuilderX开发工具基于uniapp框架开发的系统可以方便的转换为小程序、APP等移动端程序,大大降低了移动开发的成本。网络
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形。 预备知识 伪元素 伪元素是一个附加至选择器末的
今天给大家分享一些实用的JS代码片段,有需要的朋友欢迎收藏! 1、获取浏览器的版 functiongetBrowser(){ varUserAgent=navigator.us
1 . Wappalyzer 全球用户数:1,000,000+ Wappalyzer可以帮助我们了解目标网站的构建方式。工作当中存在大量此类情况,客户需要我们参照某些网站
在管理后台中我们会使用大量的表格表单组件, 导入导出各种报表, 有些场景还需要对报表数据进行可视化分析, 动态生成可视化图表, 笔者将基于以上场景, 总结一些实用的 Table 组件开发技巧,
3D动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack官网等。它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击感。所以说,为了让自己更加优秀,c
QShop商城-快速开始-前端 工具准备 NodeJs 前端环境为NodeJs,下载地址:http://nodejs.cn/download/current/ 。 默认会用版
1. 初始JavaScript 1.1 什么是 JavaScript JavaScript (简称 JS) 是世界上最流行的编程语言之一 是一个脚本语言, 通过解释器运行 主要在客户端(浏览器)上运行
1. WebAPI 背景知识 1.1 什么是 WebAPI JS 分成三个大的部分: ECMAScript: 基础语法部分 DOM API: 操作页面结构 BOM API: 操作浏览器 WebAPI
1. WebAPI 背景知识 1.1 什么是 WebAPI JS 分成三个大的部分: ECMAScript: 基础语法部分 DOM API: 操作页面结构 BOM API: 操作浏览器 WebAPI
1. 初始JavaScript 1.1 什么是 JavaScript JavaScript (简称 JS) 是世界上最流行的编程语言之一 是一个脚本语言, 通过解释器运行 主要在客户端(浏览器)上运行
有没有办法从页面访问 tomcat 服务器日志?如果有一些方法或实现可以做到这一点...... 最佳答案 PSI Probe可以列出您的 Tomcat 日志文件并显示它们的内容。您可以采用相同的方法,
我想知道是否有一些很好的免费网站性能分析工具,特别是前端。这主要是关于Javascript的。 现有工具(例如 Google Pagespeed)的问题在于它不适用于我的应用程序。在进入我的应用程序之
我曾经遇到一个 MySQL 前端应用程序,它在父行中显示外部链接行,例如,如果 Client 表有一个指向 Suburb 表的外键: (来源:vb123.com) 您知道可以执行此操作的任何前端吗?
我正在建立一个带有管理区域的网上商店来管理产品。在管理区域中,所有产品都是可见的,但在网上商店中,只有数据库表中标记为 active = 1 的产品是可见的。 我正在使用 Silex 并将存储库注册为
有可能在 C# 中制作 GUI,但在 C 或 C++ 中制作实际程序。 比如说我想制作一个聊天应用程序。我希望界面在 C# 中。但我想用 C 编写所有实际代码。这可能吗? 我找到了 http://ww
对于我自己的教育,我很好奇编译器使用哪个 C++ 前端和后端。您能告诉我以下技术在哪里使用以及它们有哪些标志/优势(如果有的话)? Open64 - 它是后端、前端还是两者兼而有之?哪些编译器使用它?
我是一名优秀的程序员,十分优秀!