1. 前言
@zxing/library 是一个 JavaScript 实现的二维码和条形码解码库。它可以很方便地在浏览器中使用。本文将为读者介绍如何使用该 npm 包,并为读者提供代码示例以便使用。
2. 安装
在使用@zxing/library 前,请确保已安装有 Node.js 和 npm。输入以下命令安装 @zxing/library:
npm install @zxing/library --save
3. 使用方法
3.1 导入库
在 JavaScript 文件中,使用以下代码导入 @zxing/library:
import { BrowserQRCodeReader } from '@zxing/library';
3.2 初始化
创建一个新的 BrowserQRCodeReader 对象并调用其方法将图片转换为二维码或条形码。
-- -------------------- ---- ------- ----- ---------- - --- ---------------------- ----- -------- - -------------------------------- -- --------- --------------------------------------------------- -- - ------------------------------ ------------ -- -------------------- -- --------- --------------------------------------- --------------------- -- - ------------------------------ ------------ -- --------------------
3.3 解码结果
decodeXXX() 函数返回一个 Promise 对象,可以使用其 then() 方法获取解码结果。解码结果包含以下字段:
text
:解码出的二维码或条形码内容;format
:二维码或条形码的格式;rawBytes
:二维码或条形码原始字节数组;numBits
:二维码或条形码的位数。
3.4 另一种解码方法
除了使用图片 URL 外,也可以使用图像元素进行解码。使用以下代码可以获取图像元素:
const img = document.getElementById('image');
然后可以将该元素传递给 decodeFromImageElement() 方法:
codeReader.decodeFromImageElement(img).then(result => { console.log(result.getText()); }).catch(err => console.error(err));
4. 示例代码
以下示例代码演示了如何将图片转换为二维码和条形码并显示解码结果:
-- -------------------- ---- ------- --------- ----- ------ ------ --------- -------------- ----------------- ------- ------ ------ -------------- -------------- ------------- -------- ---- --------------------------------------- ---------------------------------------- ----- ------- -------------- ------ - ------------------- - ---- ----------------- ----- ---------- - --- ---------------------- ----- ----- - --------------------------------- ----- ------ - ---------------------------------- ----- ----- - --- -------- --------- - ------ ------------ - ---------- - ---------------------------------------------------- -- - ----- - - ---------------------------- ----------- - --- ----- - - ----------------- ----------------------------- ------------ -- -------------------- -- ----- ------ - --- -------- ---------- - ------- ------------- - ---------- - ----------------------------------------- --------------------- -- - ----- - - ---------------------------- ----------- - --------- - - ----------------- ----------------------------- ------------ -- -------------------- -- --------- ------- -------
5. 结语
本文为读者介绍了如何使用 @zxing/library npm 包解码二维码和条形码的方法,并提供了代码示例。该库非常简单易用,适合初学者和中级开发人员使用。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/204155