什么是 QRCode.js？

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

基本用法

载入 JavaScript 文件

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

DOM结构

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

JavaScropt调用

//简单形式

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

// 设置参数方式

var qrcode = new QRCode("test", {

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

    width: 128,

    height: 128,

    colorDark : "#000000",

    colorLight : "#ffffff",

    correctLevel : QRCode.CorrectLevel.H

});

// 使用 API

qrcode.clear();

qrcode.makeCode('new content');

参数说明

new QRCode(element, option)
名称 默认值 说明
element - 显示二维码的元素或该元素的 ID
option   参数配置

option 参数说明

名称 默认值 说明
width 256 图像宽度
height 256 图像高度
colorDark "#000000" 前景色
colorLight "#ffffff" 背景色
correctLevel QRCode.CorrectLevel.L 容错级别，可设置为：

QRCode.CorrectLevel.L

QRCode.CorrectLevel.M

QRCode.CorrectLevel.Q

QRCode.CorrectLevel.H

API 接口

名称 说明
makeCode(text) 设置二维码内容
clear() 清除二维码。（仅在不支持 Canvas 的浏览器下有效）

浏览器支持

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

实例代码

HTML 代码

<input id="text" type="text" value="http://www.runoob.com" /><br />

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

CSS 代码

#qrcode {

width:160px;

  height:160px;

  margin-top:15px;

}

JavaScript 代码

var qrcode = new QRCode("qrcode");

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();

    }

});

HTML完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">

<head>

<title>Javascript 二维码生成库：QRCode</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="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>

</head>

<body>

<input id="text" type="text" value="http://www.runoob.com" style="width:80%" /><br />

<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>

<script type="text/javascript">

var qrcode = new QRCode(document.getElementById("qrcode"), {

width : 100,

height : 100

});

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>

</html>

QRCode.js：使用 JavaScript 生成二维码的更多相关文章

  1. JavaScript生成二维码图片

    1.引入一个二维码工具的js文件,同时需要引入jquery文件 下面是jquery.qrcode.min.js文件内容: (function(r){r.fn.qrcode=function(h){va ...

  2. 使用JavaScript生成二维码教程-附qrcodejs中文文档

    使用javascript生成二维码 依赖jquery 需要使用到的库 https://github.com/davidshimjs/qrcodejs DIV <div id="qrco ...

  3. QrCode C#生成二维码 及JavaScript生成二维码

    一 C#的二维码    示例: class Program { static void Main(string[] args) { QrEncoder qrEncoder = new QrEncode ...

  4. qrcode.js的识别解析二维码图片和生成二维码图片

    qrcode只通过前端就能生成二维码和解析二维码图片, 首先要引入文件qrcode.js,下载地址为:http://static.runoob.com/download/qrcodejs-04f46c ...

  5. 前端生成二维码 - Javascript生成二维码（QR）

    前段时间项目中需要动态的生成二维码,经过评估,前后端生成都可以.但后端生成会有两个问题: 没有找到正规发布出来的后端开源库. 二维码图片,会随着商品的增加而不断变多. 基于以上两个问题,决定在前端生成 ...

  6. Javascript生成二维码（QR）

    网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成.本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对不住服务器,尤其是对于大流量的网 ...

  7. Jquery.Qrcode在客户端动态生成二维码并添加自定义Logo

    0 Jquery.Qrcode简介 Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服 ...

  8. 在input中输入需要的数据，使用qrcode，点击生成二维码

    话不多说直接上代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&quo ...

  9. javaScript生成二维码（支持中文，生成logo）

    资料搜索 选择star最多的两个 第一个就是用的比较多的jquery.qrcode.js(但不支持中文,不能带logo)啦,第二个支持ie6+,支持中文,根据第二个源代码,使得,jquery.qrco ...

随机推荐

  1. Python-基础学习-Day1

    1 Python介绍 1.1 Python 是一门什么样的语言? python是一门动态解释性的强类型定义语言. 编译型的特点:可一致性差,运行速度快. 解释型的特点:边执行边解释,速度慢 1.2 P ...

  2. Zepto.js库touch模块代码解析

    Zepto.js也许并不陌生,专门针对移动端开发,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件.swipe事件),Zepto是不支持IE浏览器的. 下面来解析一些Zepto.js触摸 ...

  3. jquery实现对div的拖拽功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. SpringCloud的应用发布（一）SpringCloud的样例工程

    前言 这个综合例子创建了 6个微服务应用 一个服务注册中心 SvcReg(EurekaServer),生产中要考虑高可用 一个配置中心 CfgMgr + git目录存储配置(ConfigServer, ...

  5. Spark入门（1-5）Spark统一了TableView和GraphView

    下面我们看一下图计算的简单示例: 从图我们可以看出, 拿到Wikipedia的文档后,我们可以: 1.Wikipedia的文档 -- > table视图 -- >分析Hyperlinks超 ...

  6. ActiveMQ学习系列（一）

    一.JMS规范 JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送消 ...

  7. Django(博客系统)：重写了auth.User后使用createsupperuser出错解决办法

    背景:重写django的系统User后,使用createsupperuser创建用户失败 由于项目需要扩展django默认新的auth.User系统(添加两个字段:头像.简介等字段),因此就重写了dj ...

  8. git的理论基础

    GIT是目前世界上最先进最牛逼的分布式版本控制系统git维护的三棵树分别是工作区域.暂存区域.git仓库工作区域:就是你平时存放项目代码的地方暂存区域:用于临时存放你的改动,事实上它只是一个文件,保存 ...

  9. 用委托(Delegate)的BeginInvoke和EndInvoke方法操作线程

    让我们首先了解下什么时候用到C#异步调用: .NET Framework 允许您C#异步调用任何方法.定义与您需要调用的方法具有相同签名的委托:公共语言运行库将自动为该委托定义具有适当签名的Begin ...

  10. 1028阿里RDS如何恢复云数据库MySQL的备份文件到自建数据库

    参照 https://help.aliyun.com/knowledge_detail/41817.html 恢复云数据库MySQL的备份文件到自建数据库 更新时间:2017-07-27 14:52: ...