jQuery二维码插件生成网页二维码(转载)
来源:互联网 发布:linux输入shutdown以后 编辑:程序博客网 时间:2024/06/11 00:50
在移动端越来越流行的今天,在PC上做好之后经常会放置一个二维码引导用户到移动端上体验移动版的版本。
如果是一个固定的二维码,我们只需要在网上找个地方生成图片,然后放上图片就可以了。但如果是地址不固定需要根据页面来生成的话。就有两种做法,一个是后端根据页面做一个动态的二维码。一种是前端使用插件生成。
本文要推荐的是一个jQuery二维码插件,它可以根据你设定的地址来生成一个二维码,二维码可以有div格式的,也有Canvas格式的。canvas的支持自定义logo和文字在上面。
如果你需要兼容IE等不支持canvas的浏览器的话,那你需要使用div格式的。先来个案例感受一下这个插件的魅力:演示
如何使用
只需要添加下面这个简单的语法就行了。
$(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://geek.csdn.net/news/detail/199763
阅读全文
0 0
- jQuery二维码插件生成网页二维码(转载)
- jQuery.qrcode二维码插件生成网页二维码
- jQuery生成二维码插件
- JQuery二维码插件(前台生成)
- JQuery二维码插件(前台生成)
- jquery qrcode二维码生成插件
- 生成二维码的jquery插件
- jquery qrcode二维码生成插件
- jquery生成二维码插件-封装
- PHP,jQuery插件,生成二维码
- 生成二维码jQuery 插件jquery.qrcode.js
- Jquery插件-jquery-qrcode生成二维码
- 如何生成二维码(转载)
- jquery.qrcode.min.js生成二维码插件
- 使用jQuery插件qrcode生成二维码
- jquery.qrcode.js 动态生成二维码插件
- JS生成二维码 jquery.qrcode 插件
- 网页自动生成二维码
- android7.0之后用系统图片查看器打开应用目录的图片
- HDU
- Java基础003
- angular.js 下如何动态插入删除dom节点
- 2017/8/14
- jQuery二维码插件生成网页二维码(转载)
- 8.12网易内推笔试题:小易喜欢的数列 java实现
- CentOS上以源码的方式安装Redis笔记
- 198. House Robber(哈哈哈这个简单)
- dede的{channelartlist}标签中的判断语句
- 新文档
- Redis源码剖析——RDB持久化
- 数据结构-链表
- dubbo-2