什么是 QRCode.js？

QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

基本用法

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

<script type="text/javascript">

new QRCode(document.getElementById("qrcode"), "http://www.runoob.com");  // 设置要生成二维码的链接

</script>

或者使用一些可选参数设置：

var qrcode = new QRCode("test", {

    text: "http://www.runoob.com",

    width: 128,

    height: 128,

    colorDark : "#000000",

    colorLight : "#ffffff",

    correctLevel : QRCode.CorrectLevel.H

});

同样我们可以使用以下方法：

qrcode.clear(); // 清除代码

qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码

浏览器支持

支持该库的浏览器有：IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, 等。

示例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta content="yes" name="apple-mobile-web-app-capable">

    <meta content="yes" name="apple-touch-fullscreen">

    <meta content="telephone=no,email=no" name="format-detection">

    <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">

    <title>二维码</title>

</head>

<body>

    <div class="wrapper">

        <textarea id="txtContent" cols="50" rows="5"></textarea>

        <button type="button" onclick="getCode();">生成</button>

        <div id="qrCode"></div>

        <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

        <script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>

        <script type="text/javascript">

         var qrCode = document.getElementById("qrCode");

         var txtContent = document.getElementById("txtContent");

         var qrcode=new QRCode(qrCode,{

            width:300,

            height:300,

            correctLevel:QRCode.CorrectLevel.L

        });

         function getCode() {

            qrcode.makeCode(txtContent.value);

        }

    </script>

</body>

</html>

结果：

二维码生成（QRCode.js）的更多相关文章

  1. JavaScript二维码生成——qrcode.js

    在开发中,有时候,我们需要根据不同的内容来动态生成二维码,则可以使用qrcode.js这个小插件来实现. 1.qrcode.js文件内容: (1)未压缩(qrcode.js): /** * @file ...

  2. jQuery生成二维码 jquery.qrcode.js

    https://github.com/jeromeetienne/jquery-qrcode 1.将jquery.qrcode.min.js和jquery添加到您的网页中 <script src ...

  3. C# 二维码生成——QRCode

    C#二维码生成,这里使用开源的ThoughtWorks.QRCode.dll库. 步骤: 1.下载ThoughtWorks.QRCode.dll库文件,并引用到项目中. 2.创建QRCodeHandl ...

  4. 聊聊 Web 项目二维码生成的最佳姿势

    在设计和实现的过程之后,你永远不知道部署上去的程序会已什么样的姿势运行. 本篇借一次生成二维码逻辑的不同实现,阐述 Web 项目中二维码生成的正确姿势. 文中如有批量,欢迎各位看客老爷拍砖.试运行前5 ...

  5. jquery.qrcode.min.js生成二维码 通过前端实现二维码生成

    主体代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <tit ...

  6. 二维码生成：使用 JavaScript 库QRCode.js生成二维码

    QRCode.js:跨浏览器的javascript二维码生成库,支持html5的Canvas画布,没有任何依赖. Github 地址:https://github.com/davidshimjs/qr ...

  7. jquery二维码生成插件jquery.qrcode.js

    插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 转载于:http://www.jq22.com ...

  8. .NET 二维码生成（ThoughtWorks.QRCode）

    引用ThoughtWorks.QRCode.dll (源代码里有) 1.简单二维码生成及解码代码: //生成二维码方法一 private void CreateCode_Simple(string n ...

  9. .NET 二维码生成（ThoughtWorks.QRCode）【转发jiangys】

    .NET 二维码生成(ThoughtWorks.QRCode) 2015-06-21 22:19 by jiangys, 3790 阅读, 8 评论, 收藏, 编辑 引用ThoughtWorks.QR ...

  10. 你不可错过的二维码生成与解析-java后台与前端js都有

    1.二维码分类   二维条码也有许多不同的码制,就码制的编码原理而言,通常分为三种类型. 线性堆叠式二维码 编码原理: 建立在一维条码基础之上,按需要堆积成两行或多行. 图示: 矩阵式二维码 最常用编 ...

随机推荐

  1. DDMS 使用小结

    DDMS简介 DDMS功能详解 1 Devices面板 2 功能面板 3 LogCat and Console 1.DDMS简介 DDMS的全称是Dalvik Debug Monitor Servic ...

  2. recvfrom WSAEFAULT 10014 的错误记录

    在使用 recvfrom 时一直没报错, 像这样 recvfrom(sock, Data, , (sockaddr*)&server_addr, &send_size) 当我看见百度百 ...

  3. javascript 匿名函数及闭包----转载

    网上很多解释,我无法理解,我想知道原理...这篇文章应该可以透彻一点Query片段:view plaincopy to clipboardprint? (function(){      //这里忽略 ...

  4. JAVA中的那些名词解释!

    1.JDO: (Java Data Object )是Java对象持久化的新的规范,也是一个用于存取某种数据仓库中的对象的标准化API.作用:用于存取某种数据仓库中的对象 2.JPA: JPA是Jav ...

  5. Python初学者第一天 Python安装及第一个Python程序

    Python基础: 1day: 1.Python基础: A.编程语言介绍:     a. 计算机只能理解0和1.编程即写一段按照一定规则写代码,让计算机帮你干活:     b.机器语言:最底层的语言, ...

  6. https填坑之旅

    Boss说,我们买了个权威证书,不如做全站式的https吧,让用户打开主页就能看到受信任的绿标.于是我们就开始了填坑之旅. [只上主域好不好?] 不好...console会报出一大堆warning因为 ...

  7. PHP5.5的新特性

    看了@轩脉刃 今天出炉的PHP 5.5 新特性.不过没有翻译全,我这里稍微补充下,整理成完整的一篇:) 原文:http://www.php.net/manual/zh/migration55.new- ...

  8. HashMap 和 ConcurrentHashMap，Java1.8版本

    1. HashMap Entry,一对kv就是一个Entry,还包括一些next指针,用来解决散列冲突. table,内部用来存储Entry的数组,resize时候table会成倍扩容. 容量,tab ...

  9. 理解Underscore中的_.template函数

    Underscore中提供了_.template函数实现模板引擎功能,它可以将JSON数据源中的数据对应的填充到提供的字符串中去,类似于服务端渲染的模板引擎.接下来看一下Underscore是如何实现 ...

  10. Radmin自动连接 c#版 带源码

    实现原理:1.利用radminview 自带命令 2.大漠绑定插件. 附图: 源码下载:http://files.cnblogs.com/eastday/Radmin%E8%87%AA%E5%8A%A ...