利用qrcode组件实现图片转二维码

如何实现下图效果

 

 点击头像，弹出头像的二维码，扫描二维码，可以拿到头像的照片

实现任何炫酷的功能，都离不开前人为我们写下的组件，在这里，要实现照片转二维码，需要下载qrcode插件

在代码中导入

import QRcode from 'qrcode'

使用方式极为简单QRcode 有两个参数 第一个参数，要呈现二维码的dom实例，在此项目中，我用canvas来承载二维码，所以我拿的是canvas实例，第二个参数是照片的url地址

QRcode.toCanvas(this.$refs.qrCodeRef, url)

以下为真实代码中的使用

实现如下：点击照片，弹出dialog对话框，同时显示二维码

1-dialog对话框

<el-dialog title="头像二维码" :visible.sync="avatarCodeShow" width="30%">
      <!-- 放二维码 -->
      <canvas ref="qrCodeRef"></canvas>
    </el-dialog>

给头像img标签绑定点击事件，同时将照片的url地址作为参数，传递

// 处理二维码