QRcodeJS生成二维码

最新推荐文章于 2024-02-28 09:50:04 发布

crper

最新推荐文章于 2024-02-28 09:50:04 发布

阅读量1.3w

点赞数 3

分类专栏：笔记-Js/JQ 文章标签： QRcodeJS qrcode生成 js生成QRCODE js生成二维码

本文链接：https://blog.csdn.net/crper/article/details/45953037

版权

笔记-Js/JQ 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

QRCode.js

QRCode.js是依赖JS生成二维码的.主要是通过获取DOM的标签,再通过HTML5Canvas绘制而成,不依赖JQ

获取QRCode.js

Github-Page:qrcode.js
- 有tar.gz包和zip包.
Github-Repository

引入及用法

引入

只要在<head></head>中引入即可使用,JQ不依赖,可以替换其他版本JQ(其他内容有用到JQ,比如选择器获取)

<script type="text/javascript" src="qrcode.js"></script>

基本用法

获取块,直接调用默认方法(输入生成的字符串即可生成二维码)

<div id="qrcode"></div>
<script type="text/javascript">
    new QRCode(document.getElementById("qrcode"), "https//blog.csdn.net/crper");
</script>

进阶用法

QRCODE支持以下参数:

width(宽度)
height(高度)
colorDark(背景色)
colorLight(前景色)
correctLevel(容错级别,支持L,M,H)Low/Middle/High

var qrcode = new QRCode("test", {
    text: "https//blog.csdn.net/crper",
    width: 400,
    height: 400,
    colorDark : "#000000",   
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

qrcode.clear(); // 清除二维码
qrcode.makeCode("http://naver.com"); // 生成另外一个二维码

在线生成函数

这个函数是获取id为text,判断内容是否为空,为空则弹窗提醒,不为空则生成二维码

function makeCode () {      
    var elText = document.getElementById("text");

    if (!elText.value) {
        alert("请输入您要生成的二维码内容!");
        elText.focus();
        return;
    }

    qrcode.makeCode(elText.value);
}

makeCode();

通过调用blur和keydown来触发,,当脱离焦点点击的时候生成二维码,或者输入内容后按下回车键(Enter)生成

$("#text").
    on("blur", function () {
        makeCode();
    }).
    on("keydown", function (e) {
        if (e.keyCode == 13) {
            makeCode();
        }
    });

实战小例子

<!DOCTYPE html>
<html>

  <head>
    <title>Demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <!--引用本地脚本文件-->
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="qrcode.js"></script>
    <style>
      #qrcode {
        height: 300px;
        width: 300px;
        background: #eee;
      }

      input {
        height: 25px;
        line-height: 25px;
        width: 300px;
      }

    </style>
  </head>

  <body>
    <input id="text" type="text" value="这是一个测试文本,清除后输入您要生成的内容" />
    <div id="qrcode"></div>










    <!--脚本就是要放在后面.......-->
    <script type="text/javascript">
      var qrcode = new QRCode(document.getElementById("qrcode"), {
        width: 300,
        height: 300,
        colorDark: "#000000",
        colorLight: "#03f594",
        correctLevel: QRCode.CorrectLevel.L
      });

      function makeCode() {
        var elText = document.getElementById("text");

        if (!elText.value) {
            alert("Input a text");
            elText.focus();
            return;
        }

        qrcode.makeCode(elText.value);
      }

      makeCode();

      $("#text").
      on("blur", function() {
        makeCode();
      }).
      on("keydown", function(e) {
        if (e.keyCode == 13) {
            makeCode();
        }
      });

    </script>
  </body>