利用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地址作为参数，传递

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

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

利用qrcode组件实现图片转二维码相关推荐

java利用qrcode生成带有logo的二维码（logo位置及大小自己调）
一:下载Qrcode.jar,放到lib文件夹下二:java代码 package com.test; import java.awt.Color; import java.awt.Graphics2 ...
jquery.qrcode生成带logo的二维码，同时生成带二维码的好友分享图片（js与canvas实现二维码和图片合成的海报）
首先给大家看一下效果图(纯jQuery前端技术): 提供一下demo 源代码和jquery.qrcode文件下载: https://download.csdn.net/download/qq15577 ...
liunx+python+django框架实现图片生成二维码
点击箭头处"蓝色字",免费领测试技术及面试资料! 余生皆欢喜 liunx+python+django框架实现二维码生成器首先我简单的介绍下django:django官网解释就是如 ...
使用zxing生成带logo的二维码图片，自动调节logo图片相对二维码图片的大小
使用zxing生成带logo的二维码图片,自动调节logo图片相对二维码图片的大小 * 可选是否带logo,可选是否保存二维码图片:结果返回base64编码的图片数据字符串 * 页面显示:< ...
uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片
uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片富文本一定要使用uniapp提供的<rich-text>标签,不要使用 v-html 因为<rich-text> ...
qrcode.js使用js生成二维码（并下载）的实践
知识点 base64数据形式 Base64是一种用64个字符来表示任意二进制数据的方法. – 廖雪峰官方网站 Base64编码有哪些情景需求? – 知乎案例场景后台生成邀请链接,前端拿到链接之后处 ...
VC++利用笔记本自带摄像头扫二维码功能(附源码demo)
VC++开发常用功能一系列文章 (欢迎订阅,持续更新...) 第8章:VC++利用笔记本自带摄像头扫二维码功能(附源码demo) 源代码demo已上传到百度网盘:永久生效 ,代码实现了打开笔记本 ...
图片识别二维码，二维码的黑白格线是怎么组合的？
图片识别二维码,同一信息多次生成二维码,生成的二维码的构造是一样的吗? 近十年来,我国电子信息技术飞速发展,在这个通信技术高速发展的时代,产生的众多产品对我们的生活产生了重大的影响,它们让我们的生活变 ...
qrcode 创建带LOGO的二维码
qrcode 创建带LOGO的二维码 /*** 生成二维码* @param string $url 二维码内容* @param string $path 图片保存地址* @param string $ ...

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

利用qrcode组件实现图片转二维码相关推荐

最新文章

热门文章