vue-qr生成带logo和背景图片的二维码

vue-qr一款可以生成带logo和背景图片二维码的vue前端插件，功能强大但使用简单，你可以使用该插件生成各种漂亮的二维码图片。

官方网站

https://github.com/Binaryify/vue-qr

npm下载

npm install vue-qr --save

本站下载

下载vue-qr文件

运行效果

VUE完整代码

<template>
  <div id="app">
  <vue-qr :text="ops.text"  :logoSrc="ops.logoSrc" :binarize="ops.binarize"
   :binarizeThreshold="ops.binarizeThreshold" :colorDark="ops.colorDark" 
   :autoColor="ops.autoColor" :size="ops.size"  :dotScale="ops.dotScale"   
   :bgcale="ops.bgcale" :bgSrc="ops.bgSrc" qid="itxst.com"></vue-qr>
  </div>
</template>
<script>
//导入vue和vue-qrcode
import Vue from "vue";
import VueQr from 'vue-qr';
//注册vue-qrcode组件
Vue.component(VueQr.name, VueQr);
 
export default {
  name: "App",
  data() {
    return {  
       ops:{
         //二维码内容
         text:'http://www.itxst.com',
         //logo图标
         logoSrc:'http://192.168.2.103:8080/logo.png',
         //autoColor未false,二维码数据点的颜色
         colorDark:'#007bff',
         //二维码数据点的速率比，默认未0.35
         dotScale:0.3,
         //背景图的速率比
         bgcale:0.8,
         //二维码背景图
         bgSrc:'http://192.168.2.103:8080/bg0.png',
         //二维码数据点的颜色是否自动生成颜色
         autoColor:true,
         //二值化
         binarize:false,
         //二值化值
         binarizeThreshold:130
       }
    };
  },
  methods: {
  
  },
};
</script>

属性说明

属性名称	属性说明
text	二维码内容
correctLevel	容错级别 0-3
size	二维码宽度和高度,比如120
margin	二维码内容距离边距的大小
colorDark	二维码数据点的颜色，如#3089dc，autoColor为true时无效
colorLight	空白区域的颜色，autoColor为true时无效
bgSrc	二维码背景图，通常和dotScale搭配使用
gifBgSrc	gif作为背景图，设置gifBgSrc后bgSrc无效
backgroundColor	背景颜色
backgroundDimming	.叠加在背景图上的颜色, 解码难时有帮助
logoSrc	二维码中间的logo的url地址
logoScale	计算logo大小的值,太大将导致解码失败, 计算公式 logoScale(size-2margin), 默认为 0.2
logoMargin	logo距离周边的位置，默认为0
logoBackgroundColor	当logoMargin不为0时，空白区域的颜色
logoCornerRadius	logo的圆角大小，默认为0
whiteMargin	如设置为true将会绘制白边
dotScale	二维码数据点的缩小比例，默认为0.35，如果背景图片不清晰可以缩小这个值
autoColor	是否把背景图片的主色作为数据点的颜色
binarize	若为 true, 图像将被二值化处理,
binarizeThreshold	默认 128. (0 < threshold < 255) 二值化处理的阈值
callback	生成成功的回调函数，第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid，因为是异步生成，所以需要用到qid
bindElement	默认true,否需要自动将生成的二维码绑定到HTML上。

UMD方式

umd就是通过浏览器直接引用url的方式，需要注的时logo图片和二维码背景图片必须和网页在同一个域名下面否则会有跨域问题，只能生成二维码而无法显示图片和logo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>vue-qr生成彩色二维码例子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="https://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="https://www.itxst.com/package/vue-qr/vue-qr.js"></script>
</head>
<body style="padding:10px;">
    <div id="app">
   <vue-qr :text="ops.text"  :logoSrc="ops.logoSrc" :binarize="ops.binarize" 
   :binarizeThreshold="ops.binarizeThreshold" :colorDark="ops.colorDark" 
   :autoColor="ops.autoColor" :size="ops.size"  :dotScale="ops.dotScale" 
     :bgcale="ops.bgcale" :bgSrc="ops.bgSrc" qid="testid"></vue-qr>
    </div>
    <script>
        //注册vue-qr组件
        Vue.component(window["vue-qr"].name, window["vue-qr"]);
        var app = new Vue({
            el: '#app',
            data() {
                return { 
                   ops:{
                             //二维码内容
                             text:'http://www.itxst.com',
                             //logo图标 注意必须图片和网页在同一个域名下面
                             logoSrc:'https://www.itxst.com/package/vue-qr/logo.png',
                             //autoColor未false,二维码数据点的颜色
                             colorDark:'#007bff',
                             //二维码数据点的速率比，默认未0.35
                             dotScale:0.3,
                             //背景图的速率比
                             bgcale:0.8,
                             //二维码背景图  注意必须图片和网页在同一个域名下面
                             bgSrc:'https://www.itxst.com/package/vue-qr/bg0.png',
                             //二维码数据点的颜色是否自动生成颜色
                             autoColor:true,
                             //二值化
                             binarize:false,
                             //二值化值
                             binarizeThreshold:130
                        }
                };
            },
            methods: {
            }
        });
    </script>
</body>
</html>