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 ...
随机推荐
- CUDA开发指南
安装指南:https://blog.csdn.net/qilixuening/article/details/77503631 安装了anaconda不需要安装cuda和cudnn?:https:// ...
- scrapy项目2:爬取智联招聘的金融类高端岗位(spider类)
---恢复内容开始--- 今天我们来爬取一下智联招聘上金融行业薪酬在50-100万的职位. 第一步:解析解析网页 当我们依次点击下边的索引页面是,发现url的规律如下: 第1页:http://www. ...
- sublime text3 - vue修改data,视图无更新
ubuntu系统使用sublime text3做vue开发的时候遇到了一个问题,就是修改vue文件并保存后视图页面并不会随之修改,只有重新run dev时修改才会生效,原因没找到 猜想应该是subli ...
- Json-lib 的学习笔记
json 按照我的理解来说,就是一个字串表,可以用来表示对象的字符串,也可以用来表示数组.它比 xml 文件节省了很多标签的内容. 关于什么是 json,在这里我们就不过多介绍了. Json-lib ...
- java.sql.SQLException: The server time zone value 'Öùú±ê׼ʱ¼ä' is unrecognized or repr
在数据库连接配置文件中加入以下: 解决办法为在application文件中添加serverTimezone=UTC spring.datasource.url=jdbc:mysql://localho ...
- 错误1919,配置ODBC数据源MS Access Database时发生错误ODEC错误
WIN7 64位旗舰版安装OFFICE2003 提示:“错误1919,配置ODBC数据源MS Access Database时发生错误ODEC错误” 在64位系统上,32位软件的注册表的信息不是直接在 ...
- EventBus-实现java状态机
摘自:https://www.jianshu.com/p/8def04b34b3c 首先,了解状态机是什么,我们为什么需要状态机! 举个最简单例子,请假,作为一个最底层程序员,每次请假都要领导层层审批 ...
- sqlite的系统表sqlite_master
SQLite数据库中一个特殊的名叫 SQLITE_MASTER 上执行一个SELECT查询以获得所有表的索引.每一个 SQLite 数据库都有一个叫 SQLITE_MASTER 的表, 它定义数据 ...
- 我写过的bug...
添加对,更新和查询出错 因为只写了bean里只写了se't方法,没有写get 多条件联合查询,后一个条件没用 写xml里面复制上一行,忘记把变量名改了(propertyValue没改成register ...
- WPF DevExpress Chart控件 界面绑定数据源,不通过C#代码进行绑定
<Grid x:Name="myGrid" Loaded="Grid_Loaded" DataContext="{Binding PartOne ...