JS生成二维码

利用js实现将链接或文字生成一个二维码。并且可以改变二维码的样式，二维码添加logo等。那么如何实现呢？

实现步骤：

1.引入js : jquery.qrcode.js , jquery.js , utf.js

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
//生成二维码
<script type="text/javascript" src="js/jquery.qrcode.js"></script> 
//识别文字
<script type="text/javascript" src="js/utf.js"></script> 

2.创建一个DOM元素去包含生成二维码

<div id="qrcodeTable"></div>

3.在此容器中的添加qrcode

$(function(){
  $('#qrcodeTable').qrcode({
    render: "table",                            //二维码生成方式
    text: "只是一个?吉字符串测试",            //二维码内容
    width: "200",                           //二维码的宽度
    height: "200",
  });
  $('#qrcodeCanvas').qrcode({
    render: "canvas",                        //二维码生成方式
    text: "https://www.wangyanan.online/",  //二维码内容
    width: "200",                            //二维码的宽度
    height: "200",                           //二维码的高度
    background: "#fff",                          //二维码的后景色
    foreground: "orange",                    //二维码的前景色
    src: 'img/logo.png'                          //二维码中间的图片
  });
})

ok,二维码生成搞定！！

另外注意中文ULR生成方法:

$("#qrcodeTable").qrcode(encodeURI("http://中文中文"));//使用encodeURI进行转码

点击下载源码

拓展

在Vue-cli项目中动态生成二维码

1、引入qrcode--------npm install qrcode

2、在main.js中引入

import QRCode from 'qrcode'    //定义生成二维码组件

3、在需要使用到生成二维码的组件中引入

  import QRCode from 'qrcode'     //引入生成二维码组件

4、在HTML中定义生成的位置，注意添加样式

<template>
  <div id="query">
    <h1>二维码：</h1>
    <canvas id="canvas"></canvas>
  </div>

</template>

#canvas{
  width: 80%!important;
  height: auto!important;
}

5、在js中定义生成二维码的方法并调用

//动态生成二维码
useqrcode(){
    //生成的二维码内容，可以添加变量
    this.QueryDetail='http://www.kspxzx.com/#/guard'+"?unique_code="+this.QueryDetail;
    var canvas = document.getElementById('canvas')
    QRCode.toCanvas(canvas, this.QueryDetail, function (error) {
        if (error) console.error(error)
        console.log('success!');
    })
}

我的个人博客,有空来坐坐