原文链接：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

JQuery生成二维码，有资源下载的更多相关文章

  1. 微信生成二维码 只需一个网址即刻 还有jquery生成二维码

    <div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text ...

  2. jquery生成二维码并实现图片下载

    1.引入jquery的两个js文件 <script src="../scripts/erweima/jquery-1.10.2.min.js"></script& ...

  3. js,JQuery 生成二维码

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  4. jquery 生成二维码

    jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码 <!DOCTYPE html> <html> <head> <meta ch ...

  5. jquery生成二维码图片

    1.插件介绍 jquery.qrcode.min.js插件是jq系列的基于jq,在引入该插件之前要先引入jq.能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生 ...

  6. 使用jquery生成二维码

    二维码已经渗透到生活中的方方面面,不管到哪,我们都可以用扫一扫解决大多数问题.二狗为了准备应对以后项目中会出现的二维码任务,就上网了解了如何使用jquery.qrcode生成二维码.方法简单粗暴,[] ...

  7. jQuery生成二维码 jquery.qrcode.js

    https://github.com/jeromeetienne/jquery-qrcode 1.将jquery.qrcode.min.js和jquery添加到您的网页中 <script src ...

  8. vue2.0生成二维码图片并且下载图片到本地兼容写法

    vue生成二维码图片,这里使用的是qrcode.js 这个插件(亲测写法,兼容没有问题) 第一步,下载插件 需要注意,这里下载的是qrcodejs2 cnpm install --save qrcod ...

  9. canvas生成二维码，并下载保存为本地的图片

    function getTicket(id,salt){//qrcode生成canvas二维码 $(".zc-mask").show(); $(".edit-box&qu ...

随机推荐

  1. iPhone/iOS开启个人热点的相关位置调整小结

    冬至已到,圣诞将近,最近公司项目实在太多,三四个项目反复的切换真的让人焦头烂额,趁今天有点空,把维护的三个项目顺利送出,刚好可以缕缕思路,记录一下最近遇到的问题.说不着急那是假的,客户一天天的催的确实 ...

  2. django项目运行步骤

    第一步: 创建gjango项目 django-admin startproject dname python manage.py startapps aname 第二部: 运行 -- 编辑设置 -- ...

  3. 「懒惰的美德」我用 python 写了个自动生成给文档生成索引的脚本

    我用 python 写了一个自动生成索引的脚本 简介:为了刷算法题,建了一个 GitHub仓库:PiperLiu / ACMOI_Journey,记录自己的刷题轨迹,并总结一下方法.心得.想到一个需求 ...

  4. 自学linux——20.Samba服务器的搭建

    Samba服务器的搭建 一.Samba的认识 1.Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件 2.Samba不仅用于Linux与windows系统直接的文件共享和打印共 ...

  5. 莫比乌斯反演进阶-洛谷P2257/HDU5663

    学了莫比乌斯反演之后对初阶问题没有任何问题了,除法分块也码到飞起,但是稍微变形我就跪了.用瞪眼观察法观察别人题解观察到主要内容除了柿子变形之外,主要就是对于miu函数的操作求前缀和.进而了解miu函数 ...

  6. 转：Http协议中Cookie详细介绍

    Http协议中Cookie详细介绍 Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie.内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了, ...

  7. Flask学习 url和视图

    因为扫描器的准备使用Flask框架,所以开始恶补Flask和前后端的知识 Flask是一个使用Python编写的轻量级Web应用框架,作者是 Armin Ronacher(他也是 Werkzeug 及 ...

  8. 对 精致码农大佬 说的 Task.Run 会存在 内存泄漏 的思考

    一:背景 1. 讲故事 这段时间项目延期,加班比较厉害,博客就稍微停了停,不过还是得持续的技术输出呀! 园子里最近挺热闹的,精致码农大佬分享了三篇文章: 为什么要小心使用 Task.Run [http ...

  9. 剑指offer二刷——数组专题——斐波那契数列

    题目描述 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0,第1项是1). n<=39 我的想法 斐波那契数列定义:F(0)=0,F(1)=1, ...

  10. AcWing 180. 排书

    AStar 最坏情况\(O(log_2560 ^ 4)\) 用\(AStar\)算法做了这题,程序跑了\(408ms\). 相比于\(IDA*\)的\(100ms\)左右要慢上不少. 且\(A*\)由 ...