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. HTTP状态码（HTTP Status Code）及常用场景

    常见的状态码: HTTP: Status 200 – 服务器成功返回网页HTTP: Status 3xx - 表示要完成请求,需要进一步操作. 通常,这些状态代码用来重定向HTTP: Status 4 ...

  2. LANDR：在线母带处理

    二前年没看这报道,我就有这样的想法.最近也在完成个别功能,但还是慢,原因有二个:1) 一个人做太慢了,这个要做好有太多工作要做:2) 音乐相关知识功底太差,很多时间在学基础的乐理知识. LANDR是一 ...

  3. java动态代理汇总

    逛知乎,有篇关于fastjson如此快为什么国外还是喜欢用Jackson的问题,高票答案中有一点提到了fastjson有很多写死的地方,也不太适合像spring这种依赖AOP的框架使用,顺便提到了AS ...

  4. [转载]BW增量更新的理解（时间戳）

    在BW中,存在两种数据抽取方式,完全更新与增量更新,完全更新是每次把截至到某个时间的数据全部抽取,增量抽取则只抽取上次和本次抽取之间更新的数据,很显然,增量抽取能够提高系统效率,根据SAP帮 助的说法 ...

  5. 数据仓库专题（23）：总线矩阵的另类应用-Drill Down into a More Detailed Bus Matrix

    一.前言 Many of you are already familiar with the data warehouse bus architecture and matrix given thei ...

  6. magic_quotes_gpc 、 magic_quotes_runtime 、 magic_quotes_sybase 介绍

    一.三个配置项的作用与区别 magic_quotes_gpc 作用:对php服务器端接收的 GET POST COOKIE 的值执行 addslashes() 操作.作用范围是:WEB客户服务端.作用 ...

  7. SymmetricDS 数据库双向同步开源软件入门

    一句话概括该软件:SymmetricDS是一个文件和数据库同步软件,开源的,支持多主复制,同步时过滤和在异构的网络环境中进行数据转换传输.它支持单向和双向上的多个订阅者,异步的数据复制. 以下是从CS ...

  8. Swift 自动布局框架-SnapKit

    官方网址:http://snapkit.io/ Github: https://github.com/SnapKit/SnapKit SnapKit is a DSL to make Auto Lay ...

  9. Nhibernate基础

    Nhibernate(英文冬眠的意思) 常用方法 Contains Evict Clear  在 NHibernate 中一切必须是 Virtual 的吗? http://www.cnblogs.co ...

  10. arcgis ERROR：000824 该工具未获得许可

    当时上面还说点击000824进入帮助文档,它说是由于扩展功能未勾选,于是我勾上,结果还是不行,后来它说可能是没有许可,于是我把license重新授权了一遍,结果,还是不行 其实,解决方法是在catal ...