二维码生成(QRCode.js)
什么是 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)的更多相关文章
- JavaScript二维码生成——qrcode.js
在开发中,有时候,我们需要根据不同的内容来动态生成二维码,则可以使用qrcode.js这个小插件来实现. 1.qrcode.js文件内容: (1)未压缩(qrcode.js): /** * @file ...
- jQuery生成二维码 jquery.qrcode.js
https://github.com/jeromeetienne/jquery-qrcode 1.将jquery.qrcode.min.js和jquery添加到您的网页中 <script src ...
- C# 二维码生成——QRCode
C#二维码生成,这里使用开源的ThoughtWorks.QRCode.dll库. 步骤: 1.下载ThoughtWorks.QRCode.dll库文件,并引用到项目中. 2.创建QRCodeHandl ...
- 聊聊 Web 项目二维码生成的最佳姿势
在设计和实现的过程之后,你永远不知道部署上去的程序会已什么样的姿势运行. 本篇借一次生成二维码逻辑的不同实现,阐述 Web 项目中二维码生成的正确姿势. 文中如有批量,欢迎各位看客老爷拍砖.试运行前5 ...
- jquery.qrcode.min.js生成二维码 通过前端实现二维码生成
主体代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <tit ...
- 二维码生成:使用 JavaScript 库QRCode.js生成二维码
QRCode.js:跨浏览器的javascript二维码生成库,支持html5的Canvas画布,没有任何依赖. Github 地址:https://github.com/davidshimjs/qr ...
- jquery二维码生成插件jquery.qrcode.js
插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 转载于:http://www.jq22.com ...
- .NET 二维码生成(ThoughtWorks.QRCode)
引用ThoughtWorks.QRCode.dll (源代码里有) 1.简单二维码生成及解码代码: //生成二维码方法一 private void CreateCode_Simple(string n ...
- .NET 二维码生成(ThoughtWorks.QRCode)【转发jiangys】
.NET 二维码生成(ThoughtWorks.QRCode) 2015-06-21 22:19 by jiangys, 3790 阅读, 8 评论, 收藏, 编辑 引用ThoughtWorks.QR ...
- 你不可错过的二维码生成与解析-java后台与前端js都有
1.二维码分类 二维条码也有许多不同的码制,就码制的编码原理而言,通常分为三种类型. 线性堆叠式二维码 编码原理: 建立在一维条码基础之上,按需要堆积成两行或多行. 图示: 矩阵式二维码 最常用编 ...
随机推荐
- 如何优雅地使用Markdown (Sublime 3 + MarkdownEditing+OmniMarkupPreviewer)
最近开始上手Sublime 3 作为Markdown 的重度使用者自然关于Markdown的插件是必不可少的 . 在这里记录分享一下我常用的两款Markdown插件. MarkdownEditing ...
- CSS浮动并清除浮动(造成的影响)
一.浮动 CSS浮动 CSS float浮动的深入研究.详解及拓展(一) CSS浮动属性Float详解 块级元素独占一行 块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 可以 ...
- 六、使用media实现响应式布局
常见写法: 下面总结常见的响应式布局的分类: @media screen and (max-width:320px){ #talkFooter .editArea{…… } } @media scre ...
- first-软件工程
第一部分:结缘计算机 1.你为什么选择计算机专业?你认为你的条件如何?和这些博主比呢?(必答) 之前高中班上男生特别喜欢软件这类的东西,每期电脑报都要买,我也会每期电脑报都会借来看,久而久之我就喜欢上 ...
- ubuntu下root不能复制 abc用户下的软连接文件
使用root用户去复制,提示权限不足: 那么这个软连接是个什么东西??
- Python3.x 安装Scrapy框架
先判断pip是否已经安装 pip --version 确认已经安装后,使用pip安装库 pip3 install PackageName eg: pip3 install Scrapy 报错解决方案 ...
- java Date中方法toLocaleString过时的替代方案
DateFormat ddf = DateFormat.getDateInstance(); DateFormat dtf = DateFormat.getTimeInstance(); DateFo ...
- MVC中重定向几种方法
//1.Response.Redirect using System; using System.Collections.Generic; using System.Linq; using Syste ...
- Anaconda套件,精簡版miniconda
雖然Anaconda會預先安裝豐富的套件模組,尤其是在數據科學領域方面,有非常豐富的寶藏, 大多範例或教學或許為了節省後續的麻煩,不解釋為什麼,直接就安裝Anaconda 就對了: 但是大部份的模組套 ...
- c# 的传递参数值传递与传递引用的区别,ref与out区别
值传递 C#默认都是值传递的,就是复制变量的一个副本传递给方法,所以在退出方法后,对变量的修改无效. 但是要注意,当传递是引用类型时,因为引用类型是一个引用的地址,所以修改引用地址指向的对象时,一样会 ...