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. TaskHosting - 开发桌面工具原来还可以这么简单

    由来 对于喜欢开发的我经常会写一些小工具,这些小工具多以功能为主,不要求漂亮.个性化的UI.但起码要保证使用方便,因此最基本的功能要有: GUI(图片用户界面) 程序配置的保存与读取(让用户在GUI上 ...

  2. Scala 深入浅出实战经典 第42讲：scala 泛型类,泛型函数,泛型在spark中的广泛应用

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  3. nginx 反向代理 与 Apache backend的配置联合配置

    nginx 反向代理 与 Apache backend的配置联合配置: 说明: nginx 将http映射到Apache上的特定子目录. 配置方法步骤: 1.  设置域名, 子域名映射到指定服务器ip ...

  4. Android 5.0 Default SMS App以及运营商授权SMS App

    已同步更新至个人blog:http://dxjia.cn/2015/08/android-5-default-sms-app/ 题外话:博友们有没有好用的写博客客户端推荐啊,cnblogs推荐的win ...

  5. Nagios 安装配置

    ##Debian 6 安装server # apt-get install nagios* 一路设置好各种密码,成功后访问 http://ip/nagios3 既可,默认用户*nagiosadmin* ...

  6. [GraphQL] Use GraphQLNonNull for Required Fields

    While certain fields in a GraphQL Schema can be optional, there are some fields or arguments that ar ...

  7. mingw 环境编译 liburl故障一例

    环境是 windows 10,已经安装 mingw,并设置好mingw 和 msys的环境变量 C:\Users\cracker>set |grep MinGW Path=C:\Program ...

  8. java-cef系列视频第一集：从官方代码编译

    本视频介绍了如何从官方给出步骤编译java-cef代码,生成可运行可移植的发行版. 值得一提的是:截至2016-09-24java-cef代码编译方式有所改变,读者请自行查看bitbucket上关于编 ...

  9. Unity 之 人物换装

    http://www.cnblogs.com/mcwind/archive/2011/02/18/1957453.html  原理 一. SkinedMeshRender:该对象负责网格绘制.主要数据 ...

  10. Android最佳实践之UI篇

    http://sr1.me/way-to-explore/2015/03/25/best-practice-for-android-ui.html