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;
}

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

// 計算倍數1.08rem/7.5rem
this.scale = document.body.clientWidth * 108 / 750 / 296

// 屏蔽下一行eslint報錯 
// eslint-disable-next-line
new QRCode('qrcode', { // 容器id
  text: location.href,
  colorLight: '#F1F1F1',
  correctLevel: QRCode.CorrectLevel.L
})

 

截圖

1.npm安裝

npm install html2canvas@1.0.0-rc.4 // 指定安裝版本最新版不支持IOS13

2.引入

import html2canvas from 'html2canvas'

3.截圖

html2canvas(this.$refs.imageDom, // 傳入容器ref值

  {

    scale: 2, // 縮放倍數

    logging: false, // 取消調試

    useCORS: true,  // 用CORS從服務器加載映像

    allowTaint: false, // 允許跨域

    proxy: 'url' // 跨域地址

  }

).then(canvas => {

  this.imgUrl = canvas.toDataURL('image/png') // 生成base64圖片路徑

}

4.代碼演示：

.image-box{ // 隱藏截圖模板方案
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-100%,0);
  z-index: -1;
}

<div class="image-box" ref="imageDom">內容，不支持object-fit屬性，請用background-size代替</div>

// 截圖時容器置頂
window.pageYoffset = 0
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
// 截圖
html2canvas(this.$refs.imageDom, { scale: 2, logging: false, useCORS: true, allowTaint: false, proxy: 'https://cdn.yjwysj.cn' }).then(canvas => {
  // 設置圖片:src="imgUrl"
  this.imgUrl = canvas.toDataURL('image/png')
})