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

Posted 2021-12-19 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 )
      )
    ,