vue-qr 自动生成二维码+logo图片

vue-qr 可根据文本内容生成二维码，还可以添加logo图片、设置logo大小、设置二维码大小、留白边距、背景图片、背景颜色等等。

1.安装

npm install vue-qr --save

2.使用

<vue-qr :logoSrc="logo" :logoScale="20" :size="270" :text="text" :margin="0" :dotScale="1"></vue-qr>import vueQr from 'vue-qr'
export default {components: {vueQr},data(){return {text:"{name:'姓名',value:'21322'}",logo:require('@/assets/login/logo.png'),}}
}

3.属性

text：需要编码的内容；
correctLevel：容错级别 0-3；
size：二维码尺寸，长宽一致（包含外边距）；
margin：二维码图像的外边距, 默认 20px，如果不需要可设置为0；
colorDark：实点的颜色；
colorLight：空白区域颜色；
bgSrc：准备嵌入二维码的背景图地址；
gifBgSrc：准备嵌入二维码的背景gif图，设置此项bgSrc将失效，设置此选项会影响性能，谨慎设置；
backgroundColor：背景颜色；
backgroundDimming：叠加在背景图上的颜色, 在解码有难度的时有一定帮助；
logoSrc：嵌入二维码中心的LOGO图片；
logoScale：LOGO 尺寸计算公式 logoScale*(size-2*margin), 默认 0.2，设置过大会解码失败；
logoMargin： LOGO 标识周围的空白边框, 默认为0；
logoBackgroundColor：LOGO背景颜色,需要设置logoMargin；
logoCornerRadius：标识及其边框的圆角半径, 默认为0；
whiteMargin：若设为 true, 背景图外将绘制白色边框；
dotScale：数据区域点缩小比例,默认为0.35；
autoColor：背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true；
binarize：若为 true, 图像将被二值化处理, 未指定阈值则使用默认值；
binarizeThreshold：默认 128. (0 < threshold < 255) 二值化处理的阈值；
callback：生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)；
bindElement：指定是否需要自动将生成的二维码绑定到HTML上, 默认是true;

4.参考
可参考vue-qr 官方文档
https://www.npmjs.com/package/vue-qr

vue-qr 自动生成二维码+logo图片相关推荐

简单的二维码生成接口,自动生成二维码,返回图片地址
自动生成二维码,返回图片地址本来不想写的,但是怕太久不写这个东西,就要荒废了,就先记录一下简单的东西这里因为,返回地址的时候,通过了nginx ,我试了很多方法都抓取不到对应的IP地址, 就在ng ...
Vue实现自动生成二维码并实现复制下载功能：
1.安装依赖: // 二维码组件 npm install vue-qr --save//实现复制二维码链接 npm install clipboard --save 2.使用组件: <!-- 二 ...
vue项目中自动生成二维码
vue项目中自动生成二维码我们在做vue项目时,很多时候要用到生成二维码的功能,今天给大家介绍一个有前端生成二维码的小例子: 1.安装vue-qr: npm isntall vue-qr --sav ...
vue 项目中自动生成二维码
vue 项目中自动生成二维码最近在写一个vue项目,要求根据卡号可以自动生成一个二维码,并渲染在指定位置,因为第一次做类似业务,小编在网上找了找,发现了很多,具体起来主要用的就两种: QRc ...
VUE微信H5生成二维码海报保存在本地相册
VUE微信H5生成二维码海报保存在本地相册一.效果二.说明公司需求:宣传海报从后台获取,二维码地址也从后台获得,然后生成一个海报,海报上固定位置放二维码,长按图片可以保存在本地相册(其实前面的需 ...
【在web项目jsp页面自动生成二维码功能】
在web项目jsp页面自动生成二维码功能原文: http://www.cnblogs.com/gczmn/. https://www.jq22.com/jquery-info294/. 先将下面的文 ...
最强打包插件，支持fir，蒲公英上传， 360加固，自动生成二维码
文章目录序言说明效果使用下载demo 导入文件文件内容说明配置gradle 配置gradle.properties 文件位置内容项目中配置补充说明 1.360加固配置 2.curl ...
微信二维码来源统计自动生成二维码统计？
微信二维码来源统计,我们先来了解下渠道二维码,我们的微信公众号使用渠道二维码可以实现记录粉丝是通过二维码扫描关注并进入活动功能的统计,渠道二维码还可以让粉丝扫码后直接关注成为粉丝并直接弹出微信活动的页 ...
西门子界面官方精美触摸屏+WINCC程序模板西门子官方触摸屏程序模板，炫酷的扁平式动画效果，脚本动画，自动生成二维码，可仿真，堪比智能手机，有精简，精致，wincc，无线面板等包含了所有西门子人机界
西门子界面官方精美触摸屏+WINCC程序模板西门子官方触摸屏程序模板,炫酷的扁平式动画效果,脚本动画,自动生成二维码,可仿真,堪比智能手机,有精简,精致,wincc,无线面板等包含了所有西门子人机界 ...

vue-qr 自动生成二维码+logo图片

vue-qr 自动生成二维码+logo图片相关推荐

最新文章

热门文章