什么是 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. python 中 \n 和转义r的作用和\r的实际应用

    我们先看看这张转义字符图: 1. 知识储备 \r 表示将光标的位置回退到本行的开头位置 \b 表示将光标的位置回退一位 在 python 语言中, 使用 print 打印输出时,默认是会进行换行的.如 ...

  2. Android PopupWindow显示位置设置

    当点击某个按钮并弹出PopupWindow时,PopupWindow左下角默认与按钮对齐,但是如果PopupWindow是下图的那样,会发 生错位的情况,尤其是不同尺寸的平板上,那错位错的不是一般的不 ...

  3. 十一、使用a标签打电话、发短信、发邮件

    <a href="tel:400-888-6633">拨打电话<a> <a href="sms:19956321564">发 ...

  4. RC4 加解密

    加密解密都是这一个接口 int Rc4EncryptFile(std::string in_file_path, std::string out_file_path, const char *rc4_ ...

  5. Struts2学习-ssh框架

    SSH是 struts+spring+hibernate的一个集成框架,是目前比较流行的一种Web应用程序开源框架. http://www.cnblogs.com/laibin/p/5847111.h ...

  6. html5shiv.js和respond.js引入不起作用解决

    当项目需求需要兼容ie7,8这些奇葩浏览器时,考虑到h5的便捷性及响应式,我们往往引入html5shiv.js和respond.js来让ie7,8兼容h5及一些响应式变化,引入时就需要用到条件注释,原 ...

  7. nginx限制IP恶意调用短信接口处理方法

    真实案例: 查看nginx日志,发现别有用心的人恶意调用API接口刷短信: /Jun/::: +] "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) ...

  8. memcached 相关

    今天用了下memcached,把一个日志分析结果的大数组缓存起来,由于实时性跟准确性要求不高,所以缓存一周:因为日志越来越多,不缓存的话每次查看页面会比较慢.(其实可以先离线定期计算好结果存起来).以 ...

  9. poj3259 Wormholes【Bellman-Ford或 SPFA判断是否有负环 】

    题目链接:poj3259 Wormholes 题意:虫洞问题,有n个点,m条边为双向,还有w个虫洞(虫洞为单向,并且通过时间为倒流,即为负数),问你从任意某点走,能否穿越到之前. 贴个SPFA代码: ...

  10. CI框架源码研读(整体架构)

    有人说phper的深入要从研读mvc框架开始,我跳了一个常用的CI框架入手,主要是因为 CI框架简单轻巧,可以自己DIY功能!!! 1.首先来看CI的整体架构图: 其中:application是用户级 ...