jQuery二维码插件生成网页二维码

在移动端越来越流行的今天，在PC上做好之后经常会放置一个二维码引导用户到移动端上体验移动版的版本。

如果是一个固定的二维码，我们只需要在网上找个地方生成图片，然后放上图片就可以了。但如果是地址不固定需要根据页面来生成的话。就有两种做法，一个是后端根据页面做一个动态的二维码。一种是前端使用插件生成。

本文要推荐的是一个jQuery二维码插件，它可以根据你设定的地址来生成一个二维码，二维码可以有div格式的，也有Canvas格式的。canvas的支持自定义logo和文字在上面。

如果你需要兼容IE等不支持canvas的浏览器的话，那你需要使用div格式的。先来个案例感受一下这个插件的魅力：演示

如何使用

只需要添加下面这个简单的语法就行了。

$(selector).qrcode(options);

将一个新生成的HTML元素添加到所选元素的QR代码中。如果所选元素已是画布元素，那么QR代码将绘制到它上面。

选项

{// 渲染方式: 'canvas', 'image' or 'div'render: 'canvas',// 版本范围在 1 .. 40minVersion: 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.5radius: 0,// 模块中安静的区域quiet: 0,// 模式// 0: normal// 1: label strip// 2: label box// 3: image strip// 4: image boxmode: 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模式选择2label: 'caibaojian.com',fontname: 'Arial',fontcolor: '#458fd2'
});

本文只是希望能给刚入门或迷茫的同学一些建议，合不合适只有自己才是最明白的。

jQuery二维码插件生成网页二维码相关推荐

利用jquery的qrcode.js插件生成二维码的两种方式的使用
2019独角兽企业重金招聘Python工程师标准>>> 利用jquery的qrcode.js插件生成二维码的额两种方式,canvas(即画布)方式和table方式(原文地址http: ...
用python生成个性二维码_Python 生成个性二维码
1.1 实验内容本课程通过调用MyQR接口来实现生成个人所需二维码,并可以设置二维码的大小.是否在现有图片的基础上生成.是否生成动态二维码. 本课程主要面向Python3初学者. 1.2 知识点 P ...
Swift开发小技巧--扫描二维码,二维码的描边与锁定,设置扫描范围,二维码的生成(高清,无码,你懂得!)...
二维码的扫描,二维码的锁定与描边,二维码的扫描范围,二维码的生成(高清,无码,你懂得!),识别相册中的二维码扫描二维码用到的三个重要对象的关系,如图: 1.懒加载各种类 // MARK: - 懒加载 ...
Android二维码图片生成和二维码扫描软件的设计
一．简要介绍 QR Code码,是由Denso公司于1994年9月研制的一种矩阵二维码符号,它具有一维条码及其它二维条码所具有的信息容量大.可靠性高.可表示汉字及图象多种文字信息.保密防伪性强等优点. ...
纯JavaScript二维码在线生成网页源码
介绍: 纯JavaScript实现二维码生成的网页源码,各位技术爱好者可以拿去研究, 支持设置二维码的各项具体内容,适合专业人士使用. 网盘下载地址: https://zijiewangpan.com ...
支付宝二维码/账号/转账码/生成方式/生成不可修改金额码
支付宝个人收款二维码生成, 支付宝生成自定义收款码金额, 生成不可修改备注信息. 1.这个是用户可以修改金额和备注的. 2.这个是用户不可以修改金额和备注的. 转载于:https://github.c ...
用python生成个性二维码_python生成个性二维码学习笔记
在linux环境下进行编码 1.先进家目录,自行创建Code文件夹 cd Code 2.下载MyQR库 sudo pip3 install MyQR 3.下载所需资源文件并解压 Code/ $ wge ...
二维码的生成（可设置大小）以及插件下载地址
本文写的二维码生成是基于jQuery和jquery.qrcode.min.js插件的,本文将介绍两种方法和方式,仅供朋友选择和取舍.本文最下面附有插件的下载地址! 方式1: 基于jquery.qrco ...
点击识别元素位置、生成显示二维码、下载二维码
百度网盘地址效果: 代码: <!DOCTYPE html> <html><head><meta charset="UTF-8">& ...

jQuery二维码插件生成网页二维码

jQuery二维码插件生成网页二维码相关推荐

最新文章

热门文章