简介
@jakedchampion/zxing 是一款基于 ZXing 库的二维码扫描器，适用于前端开发。本文将详细介绍该 npm 包的使用方法，包括安装、引入、初始化、使用、常见问题等。
安装
通过 npm 进行安装：
npm install @jakedchampion/zxing
引入
在 HTML 中引入 @jakedchampion/zxing，并引入画布(canvas)组件：
<script src="https://unpkg.com/@jakedchampion/zxing"></script> <canvas id="qr-canvas"></canvas>
在 JavaScript 中引入：
import zxing from '@jakedchampion/zxing'
初始化
实例化 zxing 对象，并传入画布组件：
const zx = new zxing(document.getElementById('qr-canvas'));使用
在用户点击扫描按钮之后，调用 startScan() 方法进行扫描：
const startScan = () => {
zx.startScan(result => {
console.log(result.text);
});
}示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ---- ---------------
-------
------
------- -------------------------- -- -------------
------- ------------------------
------- ------------------------------------------------------
--------
----- -- - --- --------------------------------------------
----- --------- - -- -- -
------------------- -- -
-------------------------
---
-
---------
-------
-------常见问题
画布空白，无法扫描
如果画布空白，无法扫描，请检查以下几点：
- 画布是否正确引入；
zxing对象实例化是否成功；- 是否开启麦克风访问权限；
- 是否使用支持
WebRTC的浏览器； - 是否使用 HTTPS 协议。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc4967216659e2442eb