二维码生成插件

Posted zxk5211

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了二维码生成插件相关的知识,希望对你有一定的参考价值。

(vue)二维码生成插件

一、vue-qr二维码插件(Image版)

1. 安装

// 使用node的npm安装 
npm install vue-qr --save

// 使用yarn安装 
yarn add vue-qr

2. 引用项目

<VueQr 
    draggable="false" 
    :correctLevel="3" 
    :dotScale="1" 
    :logoSrc="logo" 
    :margin="15" 
    :size="256" 
    :text="codeUrl" 
 />
import VueQr from "vue-qr";

new Vue({
    components: {VueQr}
});

3. 常用属性:

  1. draggable:禁止鼠标图片拖拽;
  2. correctLevel:识别程度容错率,分为1、2、3,值越容错率越高;
  3. bgSrc:二维码背景图像地址链接;
  4. gifBgSrc:二维码动态背景图像地址链接;
  5. dotScale:构成二维码图像的点的大小;
  6. logoSrc:二维码中心的logo图像;
  7. logoScale:二维码logo的大小;
  8. logoMarginlogo外边距留白;
  9. margin:二维码边距,默认值20px;
  10. size:二维码的宽度和高度;
  11. text:二维码生成的内容;
  12. colorDark:二维码实点的颜色,需要配合colorLight一起使用才有效;
  13. colorLight:二维码中空白的颜色,需要配合colorDark一起使用才有效;

:这些是常用的属性值,若想更进一步了解,请前去 NPM官网?查阅。

二、qrcode二维码插件(Canvas版)

1. 安装

npm install --save qrcode
// or
npm install -g qrcode
// or
yarn add qrcode

2. 引用

<canvas id="canvas"></canvas>

引用方法:

var QRCode = require('qrcode');

QRCode.toDataURL('I am a pony!', function (err, url) {
  console.log(url)
});

// or  
// errorCorrectionLevel:要绘制二维码的容错率,属性见下表
QRCode.toCanvas('url', { errorCorrectionLevel: 'H' }, function (err, canvas) {
  if (err) throw err;
  
  // 渲染生成的二维码
  var container = document.getElementById('canvas');
  container.appendChild(canvas);
});

容错率属性值:

Level Error resistance
L?(Low) ~7%
M?(Medium) ~15%
Q?(Quartile) ~25%
H?(High) ~30%

三、qrcode.vue二维码插件

1. 安装

npm install --save qrcode.vue
// or
yarn add qrcode.vue 

2. 引用

<qrcode-vue :value="value" :size="size" level="H"></qrcode-vue>

使用方法:

import QrcodeVue from 'qrcode.vue';

export default {
  data() {
    return {
      // 绑定属性值
      value: 'url', // 生成二维码文本链接
      size: 300 // 二维码宽高大小
    }
  },
  components: {
    QrcodeVue
  }
};

插件属性值:

属性 默认值 简介
value " " 转换二维码的文本链接
className " " 二维码类名
size 100 二维码默认大小
level L 容错级别(提升识别率)
background #fff 二维码背景颜色
foreground #000 二维码颜色

:对比三个二维码生成插件,各有各的优点和不足之处;相比之下,插件?vue-qr?属性值较多一些,可设置的项也比较多,同时还可以生成?logocanvas?版本的生成的二维码是?canvas,其余两个生成的二维码是?image?图片,为了减少二维码图片的拖拽,故在模板标签上添加?draggable?属性,其作用是为了防止鼠标拖拽图片。

以上是关于二维码生成插件的主要内容,如果未能解决你的问题,请参考以下文章

使用jQuery插件生成二维码

二维码生成插件qrious

Cordova各个插件使用介绍系列—$cordovaBarcodeScanner扫描二维码与生成二维码

Cordova各个插件使用介绍系列—$cordovaBarcodeScanner扫描二维码与生成二维码

从零开始配置vim(27)——代码片段

从零开始配置vim(27)——代码片段