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

小羊卷

已于 2022-08-03 19:42:52 修改

阅读量1.8k

点赞数

文章标签：前端 vue

于 2022-08-03 17:52:37 首次发布

本文链接：https://blog.csdn.net/LOxia/article/details/126145852

版权

这篇博客介绍了如何在项目中实现点击头像显示头像二维码的功能。通过使用qrcode插件，将图片转化为二维码并展示在canvas上。关键步骤包括在dialog对话框中放置canvas，点击头像触发事件，利用$nextTick确保canvas渲染完成后再生成二维码。这涉及前端开发中的交互设计和组件使用。

摘要由CSDN通过智能技术生成

如何实现下图效果

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

实现任何炫酷的功能，都离不开前人为我们写下的组件，在这里，要实现照片转二维码，需要下载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地址作为参数，传递

// 处理二维码
    onOpenCode(url) {
      this.avatarCodeShow = true
      this.$nextTick(() => {
        QRcode.toCanvas(this.$refs.qrCodeRef, url)
      })
    },

ps:关于为什么要使用$nextTick(()=>) 因为数据改变和视图变化之间，是具有一定的时间间隔的，在代码中，开始canvas标签并不存在，只有当dialog对话框显示时，canvas标签才被渲染出来，而这个时间间隔，如果不用$nextTick(()=>) 则会导致错误拿不到canvas的实例