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组件,用来处理条形码和二维码的生成处理 ...
 
随机推荐
- [linux]makefile多目录
			
在使用makefile多目录编写前需要掌握几个函数及符号 自定义变量 target=edit 引用的时候直接使用 $(target) 有点像C语言中的#define,这里的 $(target)会被替换 ...
 - 【Go】我与sync.Once的爱恨纠缠
			
原文链接: https://blog.thinkeridea.com/202101/go/exsync/once.html 官方描述 Once is an object that will perfo ...
 - 本地项目上传至GitHub
			
本地项目上传至GitHub 使用git上传 一.安装git 直接官网下载,安装即可. git官网下载 github下载 按照好后大概就是这个样子 二.创建公钥和私钥 有的就可跳过此步骤 我们双击打开g ...
 - JS function 是函数也是对象, 浅谈原型链
			
JS function 是函数也是对象, 浅谈原型链 JS 唯一支持的继承方式是通过原型链继承, 理解好原型链非常重要, 我记录下我的理解 1. 前言 new 出来的实例有 _proto_ 属性, 并 ...
 - Buffer的重要属性 position/limit/capacity
			
1 package nio; 2 3 import java.nio.IntBuffer; 4 5 /** 6 * Buffer的重要属性 position/limit/capacity 7 * po ...
 - 如何根据角色批量激活SAP Fiori服务
			
我们知道Fiori的角色跟ERP的角色是不通用的,即使你的账号有SAP_ALL的权限,但打开Fiori的时候一样是空的一片: 只有给账号加上fiori需要的角色,并激活相关服务才能用fiori app ...
 - sa-token v1.9.0 版本已发布,带来激动人心新特性:同端互斥登录
			
sa-token是什么? sa-token是一个JavaWeb轻量级权限认证框架, 官网首页:http://sa-token.dev33.cn/ 如果你经常使用腾讯QQ,就会发现它的登录有如下特点:它 ...
 - Go语言快速安装手册
			
Go 是一个开源的编程语言,它能让构造简单.可靠且高效的软件变得容易. Go是从2007年末由Robert Griesemer, Rob Pike, Ken Thompson主持开发,后来还加入了Ia ...
 - SpringBoot入门及深入
			
一:SpringBoot简介 当前互联网后端开发中,JavaEE占据了主导地位.对JavaEE开发,首选框架是Spring框架.在传统的Spring开发中,需要使用大量的与业务无关的XML配置才能使S ...
 - openstack octavia的实现与分析(二)原理,架构与基本流程
			
[了解] 其实说白了,Octavia就是将用户的API请求经过逻辑处理,转换成Haproxy或者Nginx的配置参数,下发到amphora虚机中. Octavia的内部实现中,逻辑流程的处理主要使用T ...