• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

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

互联网 diligentman 4小时前 2次浏览

生成步骤:

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


程序员灯塔
转载请注明原文链接:Vue :将头像/文本生成二维码
喜欢 (0)