vue生成二维码海报

要求：点击分享按钮，弹出海报弹窗，海报内容可配置，海报中的二维码地址为当前链接

1. 项目依赖

yarn add html2canvas
yarn add qrcodejs2

//  依赖引入
import html2canvas from 'html2canvas'
import QRCode from 'qrcodejs2'

2.弹窗html结构

<div>
  <div class="close forbidSave" @click="show = false"></div>
  <img v-if="imgSrc" :src="imgSrc" alt="">
  <div v-else>
    <div ref="modelImg" class="preimg" >
      <img class="banner" :class="{'forbidSave': forbidSave && !hasCreateCode}" alt="">
      <div class="content">
        <div ref="qrcode" class="share-model-img-content-code"></div>
      </div>
    </div>
  </div>
<div>

3. 生成当前页面的二维码

import QRCode from 'qrcodejs2'
const url = window.location.href
this.$nextTick(() => {
  new QRCode(this.$refs.qrcode, {
    render: 'canvas',
    width: 100,
    height: 100,
    typeNumber: -1,
    background: '#fff',
    correctLevel: 0,
    text: url
  })
  this.hasCreateCode = true
})

4. 将弹窗生成图片

html2canvas(this.$refs.modelImg, {
   useCORS: true,
   dpi: window.devicePixelRatio * 2,
   scale: 2,
   width: this.$refs.modelImg.offsetWidth,
   heigth: this.$refs.modelImg.offsetHeight
}).then(canvas => {
   let dataURL = canvas.toDataURL('image/png', 1.0)
   if (dataURL) {
     this.imgSrc = dataURL
     this.forbidSave = false
   }
})

5.注意事项

1. 弹窗的内容是由原来的dom（modelImg），通过canvas转换成图片，替换展示的，图片可直接通过长按保存或发送给朋友

2. 在dom转换成图片之前，应限制弹窗图片元素的长按保存

.forbidSave {
   pointer-events:none;
 }

3. 依赖 qrcodejs2、html2canvas