vue 生成二维码+截图

链接生成二维码

1.npm安装

npm install --save qrcodejs2

2.引入

import QRCode from 'qrcodejs2'

3.生成二维码

new QRCode('qrcode', { // 传入容器id

  text: url, // 链接（必填）

  width: 200, // 宽（默认256px）

  height: 200, // 高（默认256px）

  colorLight: '#F1F1F1' // 背景色

  colorDark: '#F00', // 前景色

  correctLevel: QRCode.CorrectLevel.L // 二维码可辨识度（L,M,Q,H）

})

4.代码演示：

.qrcodeBox{
  width: 296px;
  height: 296px;
  padding: 20px;
  background: #F1F1F1;
  transform-origin: 0 0;
}

CSS

<div class="qrcodeBox" :style="`transform: scale(${scale});`">
  <div id="qrcode"></div>
</div>

HTML