Vue :将头像/文本生成二维码

生成步骤:

安装 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 })
      })
    },

来源url
栏目