Vue ：将头像/文本生成二维码_SunFlower914的博客

生成步骤：

• 安装 yarn add qrcode

• 导入 import Qrcode from 'qrcode'

• 定义一个canvas标签放二维码

<canvas ref="canvas" />

• 生成

Qrcode.toCanvas(需要放置二维码的canvas标签,文本内容,{配制,宽度，高度....})

实现代码：

<!-- 1.为图片绑定点击事件 -->
<img src="imgsrc" alt="" @click="photocanv(imgsrc)">



// data中定义一个图片变量存入地址
  data() {
    return {
      imgsrc:require('../../assets/common/head.jpg'),
    }
  }


// 3.methods中定义方法：点击头像显示图片
    photocanv(imgsrc) {
      this.$nextTick(() => {
        Qrcode.toCanvas(this.$refs.canvas, imgsrc, { width: 400, height: 400 })
      })
    },