vue实现根据链接生成带logo二维码，并下载

第一步，下载插件

npm install vue-qr --save

第二步，页面中使用

<template><vue-qrref='Qrcode':logo-src="logoSrc" // logoSrc 二维码中间logo图片（选填）默认无:size="size" // 二维码尺寸:margin="0" // 二维码外边距:text="appSrc" // 生成二维码连接/><Button size='small' @click="downloadImg">下载二维码</Button>
</template>
<script>
import VueQr from 'vue-qr'
export default {name: 'QrCode',props: {// 被生成二维码连接（必填）appSrc: {type: String,default: ''},// 二维码中间logo图片（选填）logoSrc: {type: String,default: ''},// 二维码尺寸（选填）size: {type: Number,default: 150}},components: {VueQr},methods: {// 下载二维码downloadImg () {const iconUrl = this.$refs['Qrcode'].$el.srcconst a = document.createElement('a')const event = new MouseEvent('click')a.download = fileName // 定义下载的二维码文件名a.href = iconUrla.dispatchEvent(event)}}
}
</script>

以下是二维码可用属性一览

text:  //编码的内容，不能为空且必须要有值
size: 尺寸, 长宽一致, 包含外边距
margin: 二维码图像的外边距, 默认 20px，一定要设置为零，否则会被莫名奇妙的压缩
colorDark: 实点的颜色
colorLight: 空白区的颜色
bgSrc: 欲嵌入的背景图地址，一般不用，会比较花哨
backgroundColor ：背景色（默认白色）
logoSrc: 欲嵌入至二维码中心的 LOGO 地址，头像图片
logoMargin: LOGO 标识周围的空白边框, 默认为0
logoBackgroundColor：Logo 背景色,需要设置 logo margin（默认白色）

vue实现根据链接生成带logo二维码，并下载相关推荐

QRCode 扫描二维码、扫描条形码、相册获取图片后识别、生成带 Logo 二维码、支持微博微信 QQ 二维码扫描样式...
QRCode 扫描二维码.扫描条形码.相册获取图片后识别.生成带 Logo 二维码.支持微博微信 QQ 二维码扫描样式参考链接:https://github.com/bingoogolapple/B ...
java关于Zxing 生成带Logo 二维码图片失真问题
java关于Zxing 生成带Logo 二维码图片失真问题问题点 logo本身是高清图片,但是Zxing生成的二维码中,logo像素失真,感觉被严重压缩一样. 排查问题是Graphics2D 绘制 ...
qrcode生成带logo二维码
qrcode生成带logo二维码要点:因为qrcode生成二码后会把canvas隐藏,华为手机不生效且微信不支持canvas长按识别,需要把canvas转图片: 1 . 引入文件 <scrip ...
python 生成带logo二维码
-- coding: utf-8 -- """ pip install image pip install qrcode author = 'haiousy@163.co ...
扫描二维码、扫描条形码、相册获取图片后识别、生成带 Logo 二维码、支持微博微信 QQ 二维码扫描样式
GitHub项目的链接地址目录功能介绍常见问题效果图与示例 apk Gradle 依赖布局文件自定义属性说明接口说明关于我功能介绍 ZXing 生成可自定义颜色.带 logo 的二维 ...
php使用QRcode生成带logo二维码
$url = 'http://www.baidu.com'; //二维码内容可以文字.连接都行 $errorCorrectionLevel = 'M';//容错级别容错级别L(7%).M(15% ...
thinkphp 使用phpqrcode生成带logo二维码并生成海报
1-下载类库 composer require aferrandini/phpqrcode -vvv 2-common的方法 //$text 文本的内容 //$logo logo图片 function ...
使用phpqrcode生成带logo二维码并生成海报
1-下载类库 composer require aferrandini/phpqrcode -vvv 2-common的方法 //$text 文本的内容 //$logo logo图片 function ...
PHP 生成带logo二维码并修改背景颜色，利用画布布局二维样式
二维码先上图 <?phpinclude 'lib/phpqrcode.php'; require_once 'lib/image.php'; $value = "localhost/ ...

vue实现根据链接生成带logo二维码，并下载

vue实现根据链接生成带logo二维码，并下载相关推荐

最新文章

热门文章