QRCode.js一个生成二维码的javascript库
前言
最近在开发中遇到一个需求:将后端返回的链接转换成二维码,那么如何来实现呢?我们可以使用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: ,
height: ,
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, 等。
实例代码
实例一:
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 == ) {
makeCode();
}
});
实例二:
var qrcodeOne = new QRCode(document.getElementById("qrcodeOne"), {
width: ,
height: ,
colorDark : "#000000",
colorLight : "#ffffff"
}); qrcodeTwo.makeCode(res.productUrl);
注意
当然我们肯定要引入qrcode.js
QRCode.js一个生成二维码的javascript库的更多相关文章
- qrcode.js 动态生成二维码
用qrcode.js动态生成二维码图片非常简单,只需要引入qrcode.js即可使用,而且可以自定义图片大小.背景色等信息. 1.jsp代码---页面头部引入qrcode.js,jquery文件可选 ...
- jQuery.qrcode.js客户端生成二维码,支持中文并且可以生成LOGO
描述: jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码.此插件是能够独立使用的,体积也比较 ...
- 如何使用jquery.qrcode.js插件生成二维码
1.首先需要准备 jquery.qrcode.js 和 jquery.js github地址:https://github.com/lrsjng/jquery-qrcode 官方文档地址:http:/ ...
- jquery.qrcode.js 插件生成二维码
下载地址:https://github.com/jeromeetienne/jquery-qrcode 例子: <!doctype html> <html> <head& ...
- QrCode C#生成二维码 及JavaScript生成二维码
一 C#的二维码 示例: class Program { static void Main(string[] args) { QrEncoder qrEncoder = new QrEncode ...
- js动态生成二维码
一.使用jquery.qrcode生成二维码 1.首先在页面中加入jquery库文件和qrcode插件 <script type="text/javascript" src= ...
- js,JQuery 生成二维码
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- 使用qrcode输入信息生成二维码包含二维码说明信息,点击转化为图片并下载
说明:输入汉字和数字都可以识别并展示 <body> <h2 id="h2">二维码生成</h2> <br> <span id= ...
- VUE使用QRcode或者vue-qr生成二维码
这里介绍两种vue生成二维码的方法 QRcode vue-qr vue-qr比QRcode功能多在可以在中间加logo 下面先介绍QRcode vue里安装qrcodejs的npm包 npm inst ...
随机推荐
- sh_06_女友的节日
sh_06_女友的节日 # 定义 holiday_name 字符串变量记录节日名称 holiday_name = "生日" # 如果是 情人节 应该 买玫瑰/看电影 if holi ...
- Mybatis学习笔记之---多表查询(2)
Mybatis多表查询(2) (一)举例 用户和角色 一个用户可以有多个角色,一个角色可以赋予多个用户 (二)步骤 1.建立两张表:用户表,角色表,让用户表和角色表具有多对多的关系.需要使用中间表,中 ...
- 【转】ACM-数学总揽
转自: http://www.aiuxian.com/article/p-2262657.html 数学也分好几大部分,各种算法也很多,一时不知从哪里开始,算了,具体的后面再说吧,鉴于最近遇到的有关博 ...
- es之主分片和复制分片的交互过程
1:索引(创建或者删除)一个文档 首先:发送一个索引或者删除的请求给node1 其次:node1接收到请求之后,会根据请求中携带的参数“文档id”判断出该文档应该存储在具体哪一个shard中 shar ...
- JavaScript-W3School-Browser 对象:Window open() 方法
ylbtech-JavaScript-Runoob-Browser 对象:Window open() 方法 1.返回顶部 1. Window open() 方法 Window 对象 定义和用法 op ...
- Jmeter接口测试系列之测试用例编写和调用
在使用Jmeter进行接口测试时,首先需要根据接口定义,编写响应的接口测试用例,在编写接口测试用例时,我们根据测试的侧重点不同,使用不同的方式编译测试用例. 一种是:整个请求参数作为一个变量,进行测试 ...
- spotlight监控mysql性能
spotlight可以监控mysql性能,同监控linux一样配置 目录 1.安装spotlight 2.参数认识 1.安装spotlight spotlight不仅仅只是监控mysql,还可以完成数 ...
- LoadRunner11安装及破解
一.LoadRunner11安装 以管理员身份运行setup.exe 选择第一个LoadRunner完整安装程序 按照界面会弹出以上提示框,直接选择否 检查系统缺少哪些组件,点击“确定”自动安装 点击 ...
- Selenium学习之==>Switch与SelectApi接口详解
Switch 我们在UI自动化测试时,总会出现新建一个tab页面.弹出一个浏览器级别的弹框或者是出现一个iframe标签,这时我们用WebDriver提供的Api接口就无法处理这些情况了.需要用到Se ...
- Flink容错机制
Flink的Fault Tolerance,是在在Chandy Lamport Algorithm的基础上扩展实现了一套分布式Checkpointing机制,这个机制在论文"Lightwei ...