使用jQuery的插件qrcode生成二维码(静态+动态生成)及常见问题解决方法
一.简介
1.说明
qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式,您可以到https://github.com/jeromeetienne/jquery-qrcode获取最新的代码。
2.语法格式 syntax
$(selector).qrcode(options);
3.参数说明 options
{
// render method: 'canvas', 'image' or 'div'
render: 'canvas', // version range somewhere in 1 .. 40
minVersion: 1,
maxVersion: 40, // error correction level: 'L', 'M', 'Q' or 'H'
ecLevel: 'L', // offset in pixel if drawn onto existing canvas
left: 0,
top: 0, // size in pixel
size: 200, // code color or image element
fill: '#000', // background color or image element, null for transparent background
background: null, // content
text: 'no text', // corner radius relative to module width: 0.0 .. 0.5
radius: 0, // quiet zone in modules
quiet: 0, // modes
// 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.静态添加
①.首先在页面中加入jquery库文件和qrcode插件:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
②.在页面中需要显示二维码的地方加入以下代码:
<div id="code"></div>
③.调用qrcode插件:
qrcode支持canvas和table两种方式进行图片渲染,默认使用canvas方式,效率最高,当然要浏览器支持html5。直接调用如下:
$('#code').qrcode("http://www.baidu.com"); //任意字符串
您也可以通过以下方式调用:
$("#code").qrcode({
render: "table", //table方式
width: 200, //宽度
height:200, //高度
text: "www.baidu.com" //任意内容
});
2.动态添加
①.首先在页面中加入jquery库文件和qrcode插件(同上):
1 <script type="text/javascript" src="jquery.js"></script>
2 <script type="text/javascript" src="jquery.qrcode.min.js"></script>
②.在页面中需要显示二维码的地方加入以下代码(同上):
1 <div id="code"></div>
③.调用qrcode插件:
var QRcode = $('<div>');
QRcode.attr('id' ,"androidQR"); //为<div>添加属性id
QRcode.css('float' ,"right"); //这里演示如何进行css操作
QRcode.qrcode({
width: 110,
height:110,
text: 'http://www.baidu.com'
});
$('#code').append(QRcode); //将二维码元素添append到页面上id为‘code’的元素上
三.识别中文
jquery-qrcode是采用charCodeAt()方式进行编码转换的。而这个方法默认会获取它的Unicode编码,如果有中文内容,在生成二维码前就要把字符串转换成UTF-8,然后再生成二维码。您可以通过以下函数来转换中文字符串:
function toUtf8(str) {
var out, i, len, c;
out = "";
len = str.length;
for(i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
示例代码如下:
var str = toUtf8("你真可爱!");
$('#code').qrcode(str);
参考: http://www.helloweba.com/view-blog-226.html
https://larsjung.de/jquery-qrcode/
四.其他生成二维码的方法
除了jquery,还有很多可以生成二维码的方法,例如:
1.利用Google API生成二维码
2.使用PHP二维码生成类库PHP QR Code生成二维码
3.使用原生JavaScript生成二维码
等方法,本文不作说明。
1和2请参考: http://www.jb51.net/article/48124.htm
3请参考: http://www.cnblogs.com/yisheng163/p/4472687.html
使用jQuery的插件qrcode生成二维码(静态+动态生成)及常见问题解决方法的更多相关文章
- jquery.qrcode.js生成二维码(前端生成二维码)
官网地址:http://jeromeetienne.github.io/jquery-qrcode/ 第一步引入插件: <script type='text/javascript' src='h ...
- QrCode C#生成二维码 及JavaScript生成二维码
一 C#的二维码 示例: class Program { static void Main(string[] args) { QrEncoder qrEncoder = new QrEncode ...
- vue 使用QRcode生成二维码或在线生成二维码
参考:https://blog.csdn.net/zhuswy/article/details/80267748 1.安装qrcode.js npm install qrcodejs2 --save ...
- 如何利用ThoughtWorks.QRCode 生成二维码
1.引用ThoughtWorks.QRCode.dll 在nuget上查找即可引用,也可自行下载 2.生成二维码静态方法 参数: 二维码内容:fileUrl 二维码图片名:typeName #regi ...
- python_使用qrcode生成二维码
1.功能 使用qrcode生成二维码 2.代码 #生成二维码: import qrcode #根据url生成二维码 def qrcodeWithUrl(url): img = qrcode.make( ...
- java生成二维码的几个方法
1: 使用SwetakeQRCode在Java项目中生成二维码 http://swetake.com/qr/ 下载地址 或着http://sourceforge.jp/projects/qrcode/ ...
- java生成二维码的几种方式
1: 使用SwetakeQRCode在Java项目中生成二维码 http://swetake.com/qr/ 下载地址 或着http://sourceforge.jp/projects/qrcode/ ...
- 利用PHP生成二维码(转)
导读:在二维码广泛应用化的今天,在web站点中自动生成对应的二维码是最基础的需求.文章介绍了使用PHP自动生成二维码的三种方式. get方法实现方式一: $urlToEncode="163. ...
- 在java中生成二维码,并直接输出到jsp页面
在java中生成的二维码不存到磁盘里要直接输出到页面上,这就需要把生成的二维码直接以流的形式输出到页面上,我用的是myeclipse 和 tomcat 它的原理是:在加载页面时,根据img的src(c ...
- spring boot:用zxing生成二维码,支持logo(spring boot 2.3.2)
一,zxing是什么? 1,zxing的用途 如果我们做二维码的生成和扫描,通常会用到zxing这个库, ZXing是一个开源的,用Java实现的多种格式的1D/2D条码图像处理库. zxing还可以 ...
随机推荐
- CertUtil.exe被利用来下载恶意软件
1.前言 经过国外文章信息,CertUtil.exe下载恶意软件的样本. 2.实现原理 Windows有一个名为CertUtil的内置程序,可用于在Windows中管理证书.使用此程序可以在Windo ...
- 『实践』百度地图给多个marker添加右键菜单(删除、更新)
js: $.getJSON("./GetStationPlaceServlet",function(json){ for(var i=0;i<json.length;i++) ...
- 正则表达式基础->
描述:(grep) 正则表达式是一种字符模式,用于在查找过程中匹配指定的字符.在大多数程序里,正则表达式都被置于两个正斜杠之间,它匹配被查找的行中任何位置出现的相同模式 基础正则表达式 正则表达式 描 ...
- mac 升级10.12 php debug 环境 跑不起的解决 解决方案
1: mac 升级后发现 php从原来的5.5 升级为 5.6 了... 所以以前 php.ini 里面的配置全部都没有了. mac 给我们做了备份2: 没办法只能升级php对应的插件到5. ...
- linux查看内存、CPU占用资源最多的进程
[内存占用] #利用ps命令,默认使用ps参数会显示的结果 ps -aux USER PID %CPU %MEM VSZ RSS TTY STAT START TIME COMMAND root 1 ...
- 数据库--mysql介绍
一:什么是数据库 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库, 每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据. 我们也可以将数据存储在文件 ...
- Extjs6设置Store、Ajax、form的请求方式(GET、POST)
Extjs6 设置Store.Ajax.form的请求方式(GET.POST) Ajax请求和Form的submit方法设置请求方式和原来一样,使用method : 'POST'设置 // 表单提交 ...
- Luogu P1750 【出栈序列】
一眼(万年)贪心minn设小调不出来祭 首先要保证更靠前的输出更小那么容易想到,对于之后可能入栈的元素(即栈的剩余空间仍能装下的所有元素),我们可以取其中的最小值minn,和栈顶元素$top$比较,如 ...
- How to tell your iPhone application that location services are required | The Agile Warrior
div{padding-bottom:10px}.b_vPanel>div:last-child{padding:0}.banner a{color:#1020d0} --> Below ...
- ES按资源类型统计个数
一.目标:统计各类型资源的个数,输出详细报表 http://10.10.6.225:9200/dsideal_db/t_resource_info/ _mapping { "propert ...