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

    A 先手取最大,后手取最小,答案就是第 \(\left\lceil\frac{n}{2}\right\rceil\) 小的数. 用 nth_element 可以做到 \(O\left(n\right) ...

  2. 冲刺随笔——Day_Four

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺 作业正文 正文 其他参考文献 无 ...

  3. Centos7安装Kubernetes k8s v1.16.0 国内环境

    一. 为什么是k8s v1.16.0? 最新版的v1.16.2试过了,一直无法安装完成,安装到kubeadm init那一步执行后,报了很多错,如:node xxx not found等.centos ...

  4. Spring Cloud 学习 (五) Zuul

    Zuul 作为路由网关组件,在微服务架构中有着非常重要的作用,主要体现在以下 6 个方面: Zuul, Ribbon 以及 Eureka 相结合,可以实现智能路由和负载均衡的功能,Zuul 能够将请求 ...

  5. 大数据-redis-redis启动出错

    redis启动出错Creating Server TCP listening socket 127.0.0.1:6379: bind: No error 解决方法(1) 首先如果你是从官方redis官 ...

  6. python核心高级学习总结3-------python实现进程的三种方式及其区别

    python实现进程的三种方式及其区别 在python中有三种方式用于实现进程 多进程中, 每个进程中所有数据( 包括全局变量) 都各有拥有⼀份, 互不影响 1.fork()方法 ret = os.f ...

  7. Python链式赋值执行顺序及执行方式的证明

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 在<关于Python链式赋值的赋值顺序问题& ...

  8. PyQt（Python+Qt）学习随笔：QScrollArea滚动区域layout布局的作用及设置方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 滚动区域可以设置布局,布局的作用其实与其他布局一样,就是在滚动区域大小调整时,滚动区域内的子部件跟随 ...

  9. PyQt(Python+Qt)学习随笔：Qt Designer中Action的信号

    Action与菜单和工具栏挂接后,只是实现了相关的关联关系,但并不能执行响应操作,真正的响应操作是通过Action的信号与对应槽函数连接实现的. Action提供了4种信号: changed()信号: ...

  10. dataframe检查重复值，去重

    flag = df.price.duplicated() # flag = df.duplicated() #参考:https://www.cnblogs.com/trotl/p/11876292.h ...