js生成二维码信息

    昨夜突发奇想，想试一试在js前端生成二维码信息，大致的了解一些二维码的原理传送门，有想了解可以点击看一下，今早就想试一下实际操作，感叹好多写博客的自己是不是都不尝试啊，顾自己总结自己实现的方式，希望可以帮到需要的同学。

1.简单粗暴（QRCode.js）

    QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。github地址，在应用中只需要引入qrcode.min.js就可以使用了，基本用法如下，当然还有一些参数可以设置。

//最基本的语法
<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://www.xxx.com");  // 设置要生成二维码的链接
</script>

//带参数
var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "http://www.runoob.com",//要生成的信息
    width: 128,
    height: 128,
    colorDark : "#000000", //二维码颜色（默认黑色）
    colorLight : "#ffffff", //二维码背景颜色（默认白色）
    correctLevel : QRCode.CorrectLevel.H //二维码容错level（默认为高）
});

qrcode.clear(); // 清除代码
qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码

    qrcode.js会直接在给定的div下创建一个隐藏的canvas标签（用于二维码绘制）和一个img标签展示生成好的二维码，宽高就是设置的没有设置就是默认的，简单易懂。如果要是想用ES6的import，只需要在qrcode.js中添加一个行。

export  {QRCode};

2. jr-qrcode

    jr-qrcode是基于qrcode编写的一个库，那我为什么没直接用qrcode稍后介绍，jr-qrcode把字符串生成二维码，并以Base64 URL形式输出。 支持白色二维码，即反色二维码。用起来也很简单，如果看的不明白点击jr-qrcode可查看详细说明，他和第一种方式差别就是生成了一个base形式的src，直接可以让图片src指向它去展示。

  安装

npm install jr-qrcode

  用法

/** 导入方式 三种
<script type="text/javascript" src="dist/jr-qrcode.js"></script>

require('jr-qrcode');
var jrQrcode = require('jr-qrcode');

import jrQrcode from 'jr-qrcode'
*/

/**
@param: text: 要生成二维码的字符，支持中文
@param: options: {
  padding       : 10,   // 二维码四边空白（默认为10px）
  width         : 256,  // 二维码图片宽度（默认为256px）
  height        : 256,  // 二维码图片高度（默认为256px）
  correctLevel  : QRErrorCorrectLevel.H,    // 二维码容错level（默认为高）
  reverse       : false,        // 反色二维码，二维码颜色为上层容器的背景颜色
  background    : "#ffffff",    // 二维码背景颜色（默认白色）
  foreground    : "#000000"     // 二维码颜色（默认黑色）
}
@return: 生成的二维码Base64 URL
*/
var imgBase64 = jrQrcode.getQrBase64(text, options);

3.qrcode

    我在尝试安装qrcode时候遇到了一些问题，我使用命令安装以后，终端显示安装成功，但是在new QRCode()的时候报错，然后我去node_modules下查看并没有qrcode这个模块，然后看网上说有是有依赖，执行了一下brew install pkg-config cairo pango libpng jpeg giflib(mac系统)命令，在去安装还是一样，然后就放弃治疗了使用jr-qrcode，最后我在试着安装qrcode的时候竟然有了，有经验的可以留言讨论一下。

npm install --save qrcode

  这个具体用法我就不介绍了，如果你安装上了就去README里面去看一下，详细介绍了每一种用法，假如你也找不到的话，你就使用前两种好了。qrcode返回的也是一个Base64的url。

最后贴上我测试三种方法的代码，测试时候要一个一个测试

<template>
    <div>
        <div ref="qrcodeUtil" style="width:100px; height:100px; margin-top:15px;"></div>
        <div ref="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
        <img ref="imgqrcode"></img>
    </div>
</template>

<script>
import {QRCode} from '../../assets/js/qrcodeUtil'
import jrQrcode from 'jr-qrcode'
import QRCode from 'qrcode'
export default {
    data (){
        return{
            
        }
    },
    mounted(){
        this.qrcodeUtil();
        this.qrcode();
        var imgBase64 = jrQrcode.getQrBase64('https://www.baidu.com/',{
            width: 100,
            height: 100
        });
        this.$refs.imgqrcode.src = imgBase64;
    },
    methods:{
        qrcodeUtil(){
            var qrcode = new QRCode(this.$refs.qrcodeUtil, {
                width : 100,
                height : 100
            });
            qrcode.makeCode('https://blog.csdn.net/weixin_38361925');
        },
        qrcode(){
            QRCode.toDataURL('hello world!不忘初心')
            .then(url => {
                console.log(url)
                this.$refs.imgqrcode.src = url;
            })
            .catch(err => {
                console.error(err)
            })
        }
    }
}
</script>