什么是 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. arcgis api for javascript - 最基本的地图加载

    为大家贴贴最基本的地图加载: 一. API 根据Dom树上节点的 ID 确定 Map 的显示位置; 二. setBasemap 方法可得到一些ArcGIS制作好的底图,例如: "street ...

  2. Visual C++编程实现摄像头视频捕捉

    原文:http://blog.csdn.net/nemojiang/article/details/653033?locationNum=7&fps=1 前言 DirectShow是微软公司提 ...

  3. Spring @Value SpEl 知识点小记

    在JavaBean文件中使用Spring的@Value注解获取配置文件.yml或资源文件.properties中 key - value 键值信息 @Value("${stu.number} ...

  4. .NET预处理器指令

    .NET预处理器指令 做开发以来很少接触到这部分内容,基本上没有用到,偶尔在一些框架中和一些开源项目中会见到,常常因为只关心实现逻辑忽略了这部分的功能.现在自己有点时间了,还是希望能够完整的对这部分做 ...

  5. Oracle使用超大SQL脚本文件恢复数据问题记录

    在以前获取的Oracle数据库备份一般都是dmp文件,创建表空间和用户就直接使用imp或者impdp导入即可. 这一次遇到的情况比较特殊,对方提供数据时给我的是使用SQLPlus导出的SQL脚本文件, ...

  6. ELK_Elastic Search和kibana版本对应关系

    https://www.elastic.co/downloads/past-releases/kibana-5-0-0 https://www.elastic.co/downloads/past-re ...

  7. Python学习---重点模块之logging

    日志级别 日志级别  critical > error > warning > info > debug, 默认是从warning开始打印 import logging # 日 ...

  8. ZT sem_init sem_wait sem_post sem_destroy

    sem_init() 2009-06-26 16:43:11|  分类: linux |字号 订阅       信号量的数据类型为结构sem_t,它本质上是一个长整型的数.函数sem_init()用来 ...

  9. BZOJ1037:[ZJOI2008]生日聚会Party(DP)

    Description 今天是hidadz小朋友的生日,她邀请了许多朋友来参加她的生日party.hidadz带着朋友们来到花园中,打算坐成一排玩游戏. 为了游戏不至于无聊,就座的方案应满足如下条件: ...

  10. SMB linux&windows共享文件

    搭建就不多说了:https://www.xuebuyuan.com/3235974.html 在其中可以用cd(进入目录),ls(罗列文件和文件夹),get(下载文件),put(上载文件) 等命令进行 ...