记录js生成barcode，qrcode

server/2024/10/22 15:41:25/

1、barcode条形码

引入第三方JsBarcode.all.min.js，地址https://github.com/lindell/JsBarcode

可以下载到本地下载地址

<script  src="/static/JsBarcode.all.min.js"></script>

或者cdn

<script  src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>

或者npm

javascript">npm install jsbarcode --save

在使用页面

<canvas id="barcode"></canvas>
<!-- or -->
<img id="barcode"/>
<!-- or -->
<svg id="barcode"></svg>

js中

javascript">JsBarcode('#barcodeId', this.barCodeForm.value, {width: this.barCodeForm.width || 2,height: this.barCodeForm.height || 50,fontSize: this.barCodeForm.fontSize || 14,background: null// 透明背景});
// 获取生成的节点信息let image = document.getElementById("barcodeId");console.dir(image)

2、生成二维码 qrcode

引入第三方qrcode.min.js，地址https://github.com/soldair/node-qrcode

下载到本地，下载地址

<script  src="/static/qrcode.min.js"></script>

或者npm

javascript">npm install --save qrcode或者npm install -g qrcode

在使用页面中

<canvas id="qrCodeId"></canvas>
<!--or-->
<img id="qrCodeId"/>

在js中

javascript">let opts = {errorCorrectionLevel: 'H',type: 'image/png',width: this.QRCodeForm.width || 60,height: this.QRCodeForm.height || 60,quality: 0.5,//取值范围为0.1到1.0，数值越小，二维码质量越高，图片文件也越大。margin: this.QRCodeForm.margin || 1,color: {dark: '#000000ff', // 二维码的颜色，加上alpha通道实现透明light: '#00000000' // 背景透明}};// 使用img时QRCode.toDataURL(this.QRCodeForm.value, opts, function (err, url) {if (err) throw err;let image = document.getElementById('qrCodeId');image.src = url;console.dir(image)
})
// 使用canvas时
var canvas = document.getElementById('qrCodeId')
QRCode.toCanvas(canvas, 'sample text', function (error) {if (error) console.error(error)console.log('success!');
})