原文链接：http://www.yxxrui.cn/article/65.shtml
没时间或者懒得看的，可以直接看加粗部分(或试试手感▼)。
使用jquery.qrcode来生成二维码，qrcode基于JQuery，所以使用之前必须先引用JQuery。Qrcode的最新代码地址：https://github.com/jeromeetienne/jquery-qrcode
1、先添加引用
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js"></script>
2、添加存放容器
需要在页面上设置需要显示的地方，用来存放二维码，比如
<div id=“erweima”></div>
3、开始调用
$(‘#erweima’).qrcode(‘http://www.yxxrui.cn‘); //要生成的字符串
4、大功告成
====================优雅的分割线======================
方法原型：
$(selector).qrcode(options);
其中参数options详细设置方法如下：
（试了试，似乎没啥用▼）
{
// render method: ‘canvas‘, ‘table‘
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
}
（试了试，似乎没啥用▲）
常用的有
$(“#erweima”).qrcode({
render:"table",
width:200,
height:200,
background:‘#ffffff‘,//背景颜色
foreground:‘#ff0000‘,//二维码颜色
text:"http://www.yxxrui.cn"
});
需要注意的是:table的方式效率比较低，canvas方式效率高一点(默认为canvas)，但是canvas方式必须在支持html5的浏览器上才能使用，如果使用canvas时会出现无法生成的情况，而使用table时会出现速度慢的情况，所以可以考虑判断当前浏览器是否支持html5.
加粗部分如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>二维码DEMO</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
</head>
<body>
<div id="erweima"></div>
<script type="text/javascript">
var renderStr;//显示方式，有canvas和table两种
//检查是否支持html5，也可以使用其他方式
if (window.applicationCache) {
renderStr = ‘canvas‘;
}else{
renderStr = ‘image‘;
}
$(‘#erweima‘).qrcode({
render: renderStr,
width: 180,
height:180,
text: "http://www.yxxrui.cn"
//可以设置为当前url，如：window.location+""
});
</script>
</body>
</html>
加粗部分如上：
生成的二维码如下：
DEMO下载地址（可直接运行）：http://www.yxxrui.cn/article/65.shtml
时间： 2024-10-25 11:24:20