什么是 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. aop postsharp的使用:在方法进入/成功/失败/退出时获取方法名和参数值

    1.nuget安装postsharp 2.编写attribute标记 [Serializable] [AttributeUsage(AttributeTargets.Method, AllowMult ...

  2. 本地存储localStroage的用法及示例

    localStorage是HTML5在在客户端存储数据的新方法,存储的数据没有时间限制. localStorage的主要API: localStorage.setItem(key,value);   ...

  3. 2-5 Sass 的 @ 规则

    @import Sass 支持所有 CSS3 的 @ 规则, 以及一些 Sass 专属的规则,也被称为"指令(directives)". 这些规则在 Sass 中具有不同的功效,详 ...

  4. 05_dubbo_aop

    [对这行代码进行源码分析] ExtensionLoader<Protocol> loader = ExtensionLoader.getExtensionLoader(Protocol.c ...

  5. Android之自定义View以及画一个时钟

    https://www.2cto.com/kf/201509/443112.html 概述: 当Android自带的View满足不了开发者时,自定义View就发挥了很好的作用.建立一个自定义View, ...

  6. QT的编译原理

    https://www.cnblogs.com/findumars/p/4948896.html

  7. Ubuntu下python的第三方module无法在pycharm中导入

    换了台笔记本,新安装的requests module无法在pycharm导入: Traceback (most recent call last): File "/home/winsterc ...

  8. 一个典型的后台软件系统的设计复盘——（二）如何id一个事物

    这个话题,可以从类与对象说起. Dog dog1 = new Dog(); 哪个是类,哪个是对象?这个问题搞不清楚,后面就无从说起了.然后两个程序员之间沟通说,那个狗有问题.除非两人很默契,不然另一人 ...

  9. slider.js 滑动和点击事件在firefox下报错 event is not defined

    在使用layui的slider滑块控件的时候,firefox遇到了event is not defined 的情况.追究原因是因为layui的layui.js 的滑块功能依赖于silder.js,而官 ...

  10. ubuntu 摄像头软件

    sudo apt-get install cheese