jQuery.qrcode二维码插件生成网页二维码
如果是一个固定的二维码,我们只需要在网上找个地方生成图片,然后放上图片就可以了。但如果是地址不固定需要根据页面来生成的话。就有两种做法,一个是后端根据页面做一个动态的二维码。一种是前端使用插件生成。
本文推荐的是一个jQuery二维码插件,它可以根据你设定的地址来生成一个二维码,二维码可以有div格式的,也有Canvas格式的。canvas的支持自定义logo和文字在上面。
####如何使用
$(selector).qrcode(options);
将一个新生成的HTML元素添加到所选元素的QR代码中。如果所选元素已是画布元素,那么QR代码将绘制到它上面。
####选项
{
// 渲染方式: 'canvas', 'image' or 'div'
render: 'canvas',
// 版本范围在 1 .. 40
minVersion: 1,
maxVersion: 40,
// 误差校正水平: 'L', 'M', 'Q' or 'H'
ecLevel: 'L',
// 如果绘制到现有画布上的像素偏移
left: 0,
top: 0,
// 尺寸(使用像素)
size: 200,
// 代码颜色或图像元素
fill: '#000',
// 背景颜色或图像元素,null则代表透明背景
background: null,
// 内容
text: 'no text',
// 相对于模块宽度的角半径: 0.0 .. 0.5
radius: 0,
// 模块中安静的区域
quiet: 0,
// 模式
// 0: normal
// 1: label strip
// 2: label box
// 3: image strip
// 4: image box
mode: 0,
mSize: 0.1,
mPosX: 0.5,
mPosY: 0.5,
label: 'no label',
fontname: 'sans',
fontcolor: '#000',
image: null
}
####实例:
1.假如我要生成本页的二维码,支持IE浏览器,二维码大小为200x200.背景为白色,图像颜色为#1C1C1C,则可以使用这个代码:
var url = window.location.href || 'http://caibaojian.com';
$('#wx_qrcode').qrcode({
size:200,
render: "div",
fill: '#1C1C1C',
text: url
});
2.假如我要生成跟开始给的演示中一样的二维码,那我只能选择canvas或者image了。
//第二个
var url2 = 'http://caibaojian.com';
$('#canvas').qrcode({
size:200,
fill: '#1C1C1C',
text: url2,
ecLevel:'H',//误差校正水平选择最高级
mode:2,//label模式选择2
label: 'caibaojian.com',
fontname: 'Arial',
fontcolor: '#458fd2'
});
原文地址:
jQuery.qrcode二维码插件生成网页二维码的更多相关文章
- jquery.qrcode二维码插件生成彩色二维码
jquery.qrcode.js 是居于jquery类库的绘制二维码的插件,用它来实现二维码图形渲染支持canvas和table两种绘图方式. (jquery.qrcode.js 设置显示方式为tab ...
- Swift开发小技巧--扫描二维码,二维码的描边与锁定,设置扫描范围,二维码的生成(高清,无码,你懂得!)
二维码的扫描,二维码的锁定与描边,二维码的扫描范围,二维码的生成(高清,无码,你懂得!),识别相册中的二维码 扫描二维码用到的三个重要对象的关系,如图: 1.懒加载各种类 // MARK: - 懒加载 ...
- idea字节码插件JClassLib——阅读JVM字节码
idea字节码插件JClassLib--阅读JVM字节码 生成字节码文件并查看 查看字节码文件的方式:javac 文件名.java 即可生成.class文件,但是这种方式不方便 java:是运行字节码 ...
- jquery插件生成简单二维码
除了利用第三方网站生成二维码外,这是一个比较简单的办法吧. <script src="/Scripts/jquery.qrcode.min.js" type="te ...
- QRCode.js:使用 JavaScript 生成微信二维码
https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html 什么是 QRCode.js? QRCode.js 是一个用于生成二维码的 ...
- 深挖JDK动态代理(二):JDK动态生成后的字节码分析
接上一篇文章深挖JDK动态代理(一)我们来分析一下JDK生成动态的代理类究竟是个什么东西 1. 将生成的代理类编程一个class文件,通过以下方法 public static void transCl ...
- JQuery的二维码插件
jquery.qrcode.js 只有能重新生成的二维码才是安全的,大牛做了插件,满足我们吃糖的需求: 用法(除了翻译git上的readme我一下子想不到还能写点什么) 引用 <script t ...
- 使用jquery.qrcode生成二维码实现微信分享功能
前言: 最近有个这样的需求,在pc端的商品详情页增加分享功能. 微博分享.QQ好友分享.QQ空间分享这些都很常见.但是微信分享我还没有手动写过(以前改过). 最终效果如下图: 解决方案:使用jquer ...
- 基于Metronic的Bootstrap开发框架经验总结(14)--条码和二维码的生成及打印处理
在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多.本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理 ...
随机推荐
- CentOS 6或7 启动故障修复及root密码破解
CentOS 6或7 启动故障修复及root密码破解 目录 CentOS 6或7 启动故障修复及root密码破解 CentOS 6启动流程修复: 实验一:删除initramfs-2.6.32-754. ...
- window下运行nginx出现nginx: [emerg] bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions)
做谷粒学院项目,用nginx出现nginx: [emerg] bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a s ...
- Spring Security OAuth2.0认证授权五:用户信息扩展到jwt
历史文章 Spring Security OAuth2.0认证授权一:框架搭建和认证测试 Spring Security OAuth2.0认证授权二:搭建资源服务 Spring Security OA ...
- 【MyBatis】MyBatis 动态 SQL
MyBatis 动态SQL if 可以根据实体类的不同取值,使用不同的 SQL 语句来进行查询. 使用动态 SQL 最常见情景是根据条件包含 where 子句的一部分. 持久层 DAO 接口: pub ...
- 剑指offer-查找数组中重复的数字
找出数组中重复的数字. 在一个长度为 n 的数组 nums 里的所有数字都在 0-n-1 的范围内.数组中某些数字是重复的,但不知道有几个数字重复了,也不知道每个数字重复了几次.请找出数组中任意一个重 ...
- Selenium WebDriver 8大定位方式
Selenium WebDriver 8大定位方式: driver.find_element_by_id() driver.find_element_by_name() driver.find_ele ...
- 配置 Docker 镜像加速源地址
docker 安装官方文档 根据实例的操作系统类型,参考相应的文档进行安装. 查看 linux 是 CentOS 还是 Ubuntu uname -a #查看系统信息 lsb_release -a # ...
- 【ORACLE】删除表空间,没有删除数据文件怎么办?解决办法
创建表空间 SQL> create tablespace TEST datafile='+DATA/rac/datafile/test01.dbf' size 1g; Tablespace cr ...
- 洛谷P3275 [SCOI2011]糖果(差分约束)
题目描述 幼儿园里有 $N$ 个小朋友,$lxhgww $老师现在想要给这些小朋友们分配糖果,要求每个小朋友都要分到糖果.但是小朋友们也有嫉妒心,总是会提出一些要求,比如小明不希望小红分到的糖果比他的 ...
- ctfhub技能树—文件上传—前端验证
打开靶机 查看页面信息 尝试直接上传一句话木马 提示不允许上传 查看源码 发现仅允许上传.jpg,.png,.gif三种格式的文件 上传shell.jpg并使用burpsuite抓取数据包 添加完成后 ...