记录js生成barcode，qrcode

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

npm install jsbarcode --save

在使用页面

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

js中

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 

npm install --save qrcode

或者

npm install -g qrcode

 在使用页面中

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

在js中

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!');
})