普歌-前端js/vue生成二维码的两种方式

普歌-前端js/vue生成二维码的两种方式

需要生成二维码的场景比较多，支付、个人信息读取等等，今天就说说两种方式，一种单纯的生成二维码，另一种中间可以放logo

1. 方式一:QRCode.js

• QRCode.js是用于制作QRCode的JavaScript库。QRCode.js通过HTML5 Canvas和DOM中的表格标签支持跨浏览器。QRCode.js没有依赖关系。
• 在npm的使用方法：https://www.npmjs.com/package/qrcodejs2
• 我进行了总结使用方法：

1. 在js中的使用

 <div id="qrcode"></div>
 
 <script type="text/javascript">
      new QRCode(document.getElementById("qrcode"), "这里是你想要生成的内容");
</script>

还可以这样使用

var qrcode = new QRCode("test", {
 text: "这里是你想要生成的内容",
 width: 128,
 height: 128,
 colorDark : "#000000",
 colorLight : "#ffffff",
 correctLevel : QRCode.CorrectLevel.H
});

2. 内置的方法

• qrcode.clear(); // 清除二维码
• qrcode.makeCode("生成的内容"); //生成其他的二维码

3. 在vue中的使用

<template>
<div class="area">
 <div class="qrcode" ref="qrCodeUrl"></div>
</div>
</template>

<script>
import QRCode from "qrcodejs2";
export default {
data() {
 return {
 };
},
mounted() {
 this.creatQrCode();
},
methods: {
 creatQrCode() {
   var qrcode = new QRCode(this.$refs.qrCodeUrl, {
     text: "李海金看你爸爸我透你妈", // 需要转换为二维码的内容
     width: 100,
     height: 100,
     colorDark: "#000000",
     colorLight: "#ffffff",
     correctLevel: QRCode.CorrectLevel.H
   });
 }
}
};
</script>

<style lang="less">
.area {
background: #000;
}
</style>

果然没有白边的二维码不是一个合格的二维码

给它加个样式,记得不要加scoped，不用css编译

<style lang="less">
.home {
  padding: 20px;
  background: #000;
}
.qrcode {
  display: inline-block;
  img {
    width: 140px;
    height:140px;
    background-color: #fff; //设置白色背景色
    padding: 6px; // 利用padding的特性，挤出白边
    box-sizing: border-box;
  }
}
</style>

2. 方式二:vue-qr，组件形式

官方:https://www.npmjs.com/package/vue-qr

1. 第一步安装

npm install vue-qr --save

2. 第二步引入到vue文件中

import VueQr from 'vue-qr'
 
new Vue({
    components: {VueQr}
})

3.第三步使用

<template>
  <div class="home">
  <!--关于本地url路径需要用require -->
    <vue-qr
      text="Hello world!"
      :whiteMargin="true"
      :logoSrc="imgUrl"
      :size="200"
      colorDark="#ff6700"
    ></vue-qr>
      </div>
</template>

<script>
import Swiper from "swiper";
import $ from "jquery";
import QRCode from "qrcodejs2";
import VueQr from "vue-qr";
export default {
  components: {
    VueQr
  },
  data() {
    return {
      imgUrl: require("../assets/logo.png")
    };
  },
};
</script>

4.参数说明

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

结束了，看看孩子的其他文章呗

更多推荐：wantLG的《普歌-uniapp安卓打包apk发布软件商城》

---

• 作者：wantLG
• 本文源自：wantLG的《普歌-前端js/vue生成二维码的两种方式》
• 本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。