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. Scala 深入浅出实战经典 第62讲：Scala中上下文界定内幕中的隐式参数实战详解

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

  2. Javascript的一个生产PDF的库： unicode和中文问题的解决

    Javascript的一个生产PDF的库: unicode和中文问题的解决基于canvas和jspdf库, 实现用javascript的支持中文pdf生成实用工具.参考:http://javascri ...

  3. 如何让Targetprocess 中 webhook 推送comment 到指定的项目

    Targetprocess 作为Agile管理工具非常好使.我们用TP + bearychat来做任务的沟通. TP目前是不支持comment push到指定的项目,因为其带出的字段中没有相关项目.但 ...

  4. [译] 二、开始iOS编程之前，你还需要做什么？

    声明:本文翻译自AppCoda网站的文章:What You Need to Begin iOS Programming?,作者是创建者Simon Ng.如有异议,请联系博主.   更新:帖子已经重新被 ...

  5. 关于创建可执行的jar文件(assembly)

    java利用maven生成一个jar包,如何自动生成清单属性文件(MANIFEST.MF),如何解决jar依赖问题? 办法很简单: 只需在pom.xml文件中配置如下plugin即可: <plu ...

  6. 解决ubuntu解压zip文件名乱码的问题

    1. 安装7-zip 和 convmv : 命令: sudo apt-get install convmv p7zip-full 2. 解压zip文件: 命令:LANG=C 7z e yourZIPf ...

  7. c++中两个类互相引用的问题

    最近在改一个C++程序的时候碰到一条警告信息,警告信息为:“ 删除指向不完整“Q2DTorusNode”类型的指针:没有调用析构函数                1> c:\users\lxw ...

  8. 最近一直在搞CAE，发现Eplan p8真的好强大。

    最近一直在搞CAE,发现Eplan p8真的好强大. 标准化的意义在与提高工作效率,减少重复. 标准化后,不容易出错,项目更改容易.事件都能及时跟踪.

  9. A successful Git branching model

    这个模型比较全,收藏一下,原文: http://nvie.com/posts/a-successful-git-branching-model/ 关于这个模型中的hotfix只适应最新的Release ...

  10. 安卓TTS语音合成经验分享（科大讯飞语音+）集成

    应用场景:足浴软件,技师钟房安排调派和队列排序查看,语音播报提醒.老程序是使用双屏显卡,windows系统PC上运行一个无人值守桌面程序.如今安卓机顶盒(WIFI)和MINI电视棒通过HDMI接口和支 ...