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

猜你喜欢

转载自blog.csdn.net/SunFlower914/article/details/121522120

相关文章