QRCode.js

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

获取QRCode.js

引入及用法

引入

  • 只要在<head></head>中引入即可使用,JQ不依赖,可以替换其他版本JQ(其他内容有用到JQ,比如选择器获取)
<script type="text/javascript" src="qrcode.js"></script>
  • 1
  • 1

基本用法

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

<div id="qrcode"></div>

<script type="text/javascript">

    new QRCode(document.getElementById("qrcode"), "https//blog.csdn.net/crper");

</script>
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

进阶用法

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"); // 生成另外一个二维码
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

在线生成函数

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

function makeCode () {

    var elText = document.getElementById("text");

    if (!elText.value) {

        alert("请输入您要生成的二维码内容!");

        elText.focus();

        return;

    }

    qrcode.makeCode(elText.value);

}

makeCode();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

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

$("#text").

    on("blur", function () {

        makeCode();

    }).

    on("keydown", function (e) {

        if (e.keyCode == 13) {

            makeCode();

        }

    });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

实战小例子

<!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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76

浏览器适配,支持下列

PC Mobile
IE6~10 Mobile Safari
Chrome Android
Firefox Windows Mobile
Safari  
Opera  

遵循协议

MIT License

 
 原文作者：crper
原文链接：http://blog.csdn.net/crper/article/details/45953037

转载---QRcodeJS生成二维码的更多相关文章

  1. qrcodeJS生成二维码

    后续抽时间自己来整理笔记 http://code.ciaoca.com/javascript/qrcode/

  2. 使用JavaScript生成二维码教程-附qrcodejs中文文档

    使用javascript生成二维码 依赖jquery 需要使用到的库 https://github.com/davidshimjs/qrcodejs DIV <div id="qrco ...

  3. 转载【TP3.2】：使用PHP生成二维码

    转载:在网上down了一个二维码插件PHPQRcode,整合到了ThinkPHP 3.2.3,然后写了个外部自定义函数直接调用生成二维码,根据参数不同有不同尺寸效果,整合其实挺简单,分享给大家! 今天 ...

  4. VUE 生成二维码(qrcodejs)

    1. 概述 1.1 引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行 ...

  5. 使用jquery-qrcode生成二维码（转载）

    一.使用jquery-qrcode生成二维码 先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcod ...

  6. js生成二维码（jquery自带）

    //引入js<script type="text/javascript" src="js/jquery.js"></script> &l ...

  7. C# Qrcode生成二维码支持中文,带图片，带文字 2015-01-22 15:11 616人阅读 评论(1) 收藏

    1.下载Qrcode库源码,下载地址:http://www.codeproject.com/Articles/20574/Open-Source-QRCode-Library 2.打开源码时,部分类库 ...

  8. thinkphp整合系列之phpqrcode生成二维码

    php生成二维码其实挺简单的:当然指的是使用qrcode类库: 因此关于是否要写这篇博客:我是犹豫了再三的: 不过最后还是决定写下吧:如果有童鞋急着用:就可以直接引了: 再个也可以作为即将写的文章微信 ...

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

    详情链接地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-2-cordovabarcodescanner/ 这是 ...

随机推荐

  1. ubuntu 16.04 samba 文件共享

    生成samba用户名密码修改配置文件重启samba服务使之生效 以前在ubuntu 14.04的时候,很方便的通过几行命令和一个GUI界面就可以配置好samba共享文件给windows了: Ubunt ...

  2. 用Pomelo 搭建一个简易的推送平台

    前言 实际上,个人感觉,pomelo 目前提供的两个默认sioconnector和hybridconnector 使用的协议并不适合用于做手机推送平台,在pomelo的一份公开ppt里面,有提到过, ...

  3. 解决 The Apache Tomcat Native library which allows optimal performance in production environments was not found on the java.library.path

    到 http://tomcat.heanet.ie/native/ 下载最新的tcnative-1.dll放到相应目录即可,我目前下载的是 http://tomcat.heanet.ie/native ...

  4. 用户管理 之 用户（User）和用户组（Group）配置文件详解

    用户(User)和用户组(Group)的配置文件,是系统管理员最应该了解和掌握的系统基础文件之一,从另一方面来说,了解这些文件也是系统安全管理的重要组成部份:做为一个合格的系统管理员应该对用户和用户组 ...

  5. Windows调试学习笔记：（一）WinDBG中加载SOS和CLR

    最近产品环境出现了部分服务器当机情况,虽然重启之后问题就不出现了.但本着彻底解决问题的态度,想要找到root cause.多次尝试Visual Studio失败(可能是代码惊醒了优化和签名)之后,决定 ...

  6. LeetCode: Remove Nth Node From End of List 解题报告

    Remove Nth Node From End of List Total Accepted: 46720 Total Submissions: 168596My Submissions Quest ...

  7. [原创]Java中的字符串比较，按照使用习惯进行比较

    java中的字符串比较一般可以采用compareTo函数,如果a.compareTo(b)返回的是小于0的数,那么说明a的unicode编码值小于b的unicode编码值. 但是很多情况下,我们开发一 ...

  8. PLSQL登录弹出空白框如何解决

     转自:http://jingyan.baidu.com/article/066074d6760959c3c21cb0d6.html   出现登录弹出空白框这是由于win7的安全性提高了,在PLSQL ...

  9. Promise 使用心得

        this.testPromise=function(){         return new Promise(function(resolve,reject){             co ...

  10. Eclipse+Selenium自动化测试脚本设计V1.0

    Eclipse+Selenium自动化测试脚本设计V1.0 http://www.docin.com/p-803032251.html