首页 > 代码库 > JQuery生成二维码，有资源下载

JQuery生成二维码，有资源下载

2024-09-12 04:20:53   215人阅读

原文链接：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="http://www.mamicode.com/jquery.min.js"></script> 
<script type="text/javascript" src="http://www.mamicode.com/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="http://www.mamicode.com/jquery.min.js"></script> 
<script type="text/javascript" src="http://www.mamicode.com/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



JQuery生成二维码，有资源下载


联系
我们