二维码条形码生成的JavaScript脚本库

Elina ·

更新时间:2024-09-21

· 1705 次阅读

引言

条形码

二维码

引言

二维码或条形码在日常生活中现在应用已经非常普遍了，文章分享生成条形码和二维码的JavaScript库。

条形码

条形码是日常生活中比较常见的，主要用于商品。通俗的理解就是一串字符串的集合（含字母、数字及其它ASCII字符的集合应用），用来常用来标识一个货品的唯一性，当然还有更多更深入与广泛的应用，像超市的商品、衣服、微信、支付宝、小程序等到处都有条形码的广泛应用；

安装依赖：

npm install jsbarcode --save-dev

在 HTML 页面上加入以下代码：

<svg id="barcode"
  jsbarcode-value="123456789012"
  jsbarcode-format="code128"></svg>

接下来看下 JavaScript 代码，如下：

import jsbarcode from 'jsbarcode';
const createBarcode = (value, elemTarget) => {
    jsbarcode(elemTarget, "value");
};
createBarcode("#barcode", "devpoint");

运行成功的效果如下：

二维码

相比条形码，二维码的使用场景也越来也多，支付码、场所码、小程序等等。二维码的长相经常是在一个正方形的框中填充各种点点或无规则小图形块而构成的图形，这种称之为二维码，他与一维码最大的区别就是存储容量大很多，而且保密性好。二维码本质上表现给大家的就是一个静态图片，其实是包含特字加密算法的图形，里面存储的是一串字符串（即字母、数字、ASCII码等），这说明二维码不仅存储量大，而且存储的内容很广泛，数字、字母、汉字等都可以被存储。

安装依赖：

npm install qrcode --save-dev

HTML：

<canvas id="qrcode"></canvas>

JavaScript：

import QRCode from "qrcode";
const createQrcode = (value, elemTarget) => {
    QRCode.toCanvas(document.querySelector(elemTarget), value);
};
createQrcode("#qrcode", "devpoint");

效果如下：