jQuery.qrcode二维码插件生成网页二维码
来源:互联网 发布:ipad好玩软件推荐 编辑:程序博客网 时间:2024/04/26 15:36
如果是一个固定的二维码,我们只需要在网上找个地方生成图片,然后放上图片就可以了。但如果是地址不固定需要根据页面来生成的话。就有两种做法,一个是后端根据页面做一个动态的二维码。一种是前端使用插件生成。
本文推荐的是一个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'});
原文地址:
http://caibaojian.com/jquery-qrcode.html
阅读全文
0 0
- jQuery.qrcode二维码插件生成网页二维码
- jquery qrcode二维码生成插件
- jquery qrcode二维码生成插件
- 生成二维码jQuery 插件jquery.qrcode.js
- Jquery插件-jquery-qrcode生成二维码
- qrcode插件生成二维码
- QRCode插件生成二维码
- jquery.qrcode.min.js生成二维码插件
- 使用jQuery插件qrcode生成二维码
- jquery.qrcode.js 动态生成二维码插件
- JS生成二维码 jquery.qrcode 插件
- jquery.qrcode生成二维码
- jquery.qrcode生成二维码
- jquery-qrcode生成二维码
- jquery.qrcode 生成二维码
- jquery-QRCode生成二维码
- jQuery.qrcode生成二维码
- jQuery插件-二维码-jquery.qrcode
- java泛型
- 关于wxWidget多语言移植时一些注意事项
- SpringBoot简单搭建
- 电脑桌面录制直播嵌入网页
- linux里面的反编译
- jQuery.qrcode二维码插件生成网页二维码
- 在/sys目录下建立一个文件,并且实现信息的读取和存储
- 五分钟理解一致性哈希算法(consistent hashing)
- 《算法导论》第一章-思考题(参考答案)
- numpy
- .NET 4.0 任务(Task)
- python 输出是省略号的问题
- 分布式搜索elasticsearch配置文件详解
- express入门(4)-get