Javascript 扫描摄像头或图像文件二维码和条形码
作者：互联网
我从2015年开始维护的小二维码扫描库最近越来越受到关注。权力带来了责任、错误和功能请求。开发人员要求的一些关键功能是更可靠的扫描和扫描不同类型条码的能力。与version 2.0.0起开发者可以扫描不同类型的一维码（条形码）和二维码（例如QR码或AZTEC）。
本文列出了version 2.x.x. 我还将列出开发人员可以用来将更强大的代码扫描功能集成到他们的网页或应用程序的新 API 和功能。
这是我正在使用的库：mebjas/html5-qrcode，在qrcode.minhazav.dev 上结帐演示
有什么新鲜事version 2.x.x
最新的： 正在上传…重新上传取消 正在上传…重新上传取消 正在上传…重新上传取消
- 能够扫描不同种类的一维码和二维码。
- 在此处查看所有支持的格式。
- 成功回调中返回的扫描格式类型和名称。
- 更可靠的代码扫描，修复issue#134、issue#63、issue#140 等问题。
- [次要] 库现在报告更精细的错误，以减少开发人员的调试时间。
- 例如，如果在
HTTPurl 中使用了库，则会报告确切的问题。
- 例如，如果在
代码健康修复
-
整个代码迁移到 Typescript以实现可扩展且不易出错的开发。
-
基于Codacy报告的几个代码健康问题的修复，现在我们已经在Codacy A级- 正在上传…重新上传取消，跟踪问题，这个重构
查看自版本 2.0.0 以来的变更日志以获得更清晰的信息。
使用库
该库公开了两个主要类：
Html5QrcodeScanner- 使用它来设置带有 UI 的端到端扫描仪，构建在Html5Qrcode.- 负责构建完整的用户界面
- 支持在设备上使用网络摄像头或摄像头进行扫描，并提供实时摄像头馈送。
- 支持扫描设备本地图片。
Html5Qrcode- 较低级别的库，公开 API 以构建您的代码扫描器。
使用集成代码扫描器Html5QrcodeScanner
按照以下步骤将 QR 码或条码扫描功能集成到您的 Web 应用程序中：
安装库
您可以npm使用unpkg 之类的CDNS安装库或直接加载它
安装使用npm
npm install --save-dev html5-qrcode
从 unpkg 或其他 CDN 加载最新的库
<!-- include the library -->
<script src="https://unpkg.com/html5-qrcode@2.0.9/dist/html5-qrcode.min.js"></script>添加占位符 HTML 元素
将占位符 HTML 元素添加到您的网页。扫描 UI 将在此元素中呈现。给它适当的样式，如width或height。
<div id="qr-reader" style="width: 600px"></div>
在javascript中初始化
现在您可以使用这些代码设置扫描仪。
function onScanSuccess(decodedText, decodedResult) {
console.log(`Code scanned = ${decodedText}`, decodedResult);
}
var html5QrcodeScanner = new Html5QrcodeScanner(
"qr-reader", { fps: 10, qrbox: 250 });
html5QrcodeScanner.render(onScanSuccess);演示
代码扫描器闲置的
笔记：
- 您可以通过传递不同的配置对象来自定义扫描仪 -阅读更多。
- 成功回调具有以下接口（/src/core.ts）
/** Format of detected code. */
interface QrcodeResultFormat {
format: Html5QrcodeSupportedFormats;
formatName: string;
}
/** Detailed scan result. */
interface QrcodeResult {
text: string;
format: QrcodeResultFormat,
}
/** QrCode result object. */
interface Html5QrcodeResult {
decodedText: string;
result: QrcodeResult;
}
type QrcodeSuccessCallback
= (decodedText: string, result: Html5QrcodeResult) => void;Html5Qrcode接口
如果要构建用户界面，可以使用Html5Qrcode类公开的公共 API ：
class Html5Qrcode {
constructor(elementId: string, config: Html5QrcodeFullConfig) {}
/** Start scanning. */
start(cameraIdOrConfig: Html5QrcodeIdentifier,
configuration: Html5QrcodeCameraScanConfig | undefined,
qrCodeSuccessCallback: QrcodeSuccessCallback | undefined,
qrCodeErrorCallback: QrcodeErrorCallback | undefined,
): Promise<null> {}
/** Stop scanning. */
stop(): Promise<void> {}
/** Clear the rendered surface. */
clear(): void {}
/** Scan a file. */
scanFile(
imageFile: File,
showImage?: boolean): Promise<string> {}
/** Returns list of cameras in the device, invokes permission request. */
static getCameras(): Promise<Array<CameraDevice>> {}
}所有支持的格式
这些是库现在支持的不同代码格式，示例如下：
| 代码 | 例子 |
|---|---|
| 二维码 |
|
| 阿兹特克 |
|
| CODE_39 |
|
| CODE_93 |
|
| CODE_128 |
|
| 最大代码 |
|
| 国际乒联 |
|
| EAN_13 |
|
| EAN_8 |
|
| PDF_417 |
|
| RSS_14 |
|
| RSS_EXPANDED |
|
| UPC_A |
|
| UPC_E |
|
| 数据_矩阵 |
|
<html>
<head>
<title>Html-Qrcode Demo</title>
<body>
<div id="qr-reader" style="width:500px"></div>
<div id="qr-reader-results"></div>
</body>
<script src="html5-qrcode.min.js"></script>
<script>
function docReady(fn) {
// see if DOM is already available
if (document.readyState === "complete"
|| document.readyState === "interactive") {
// call on next available tick
setTimeout(fn, 1);
} else {
document.addEventListener("DOMContentLoaded", fn);
}
}
docReady(function () {
var resultContainer = document.getElementById('qr-reader-results');
var lastResult, countResults = 0;
function onScanSuccess(decodedText, decodedResult) {
if (decodedText !== lastResult) {
++countResults;
lastResult = decodedText;
// Handle on success condition with the decoded message.
console.log(`Scan result ${decodedText}`, decodedResult);
}
}
var html5QrcodeScanner = new Html5QrcodeScanner(
"qr-reader", { fps: 10, qrbox: 250 });
html5QrcodeScanner.render(onScanSuccess);
});
</script>
</head>
</html>
标签：条形码,QR,string,decodedText,代码,Javascript,扫描,图像文件,上传 来源： https://blog.csdn.net/allway2/article/details/120742267