如果是一个固定的二维码,我们只需要在网上找个地方生成图片,然后放上图片就可以了。但如果是地址不固定需要根据页面来生成的话。就有两种做法,一个是后端根据页面做一个动态的二维码。一种是前端使用插件生成。

本文推荐的是一个jQuery二维码插件,它可以根据你设定的地址来生成一个二维码,二维码可以有div格式的,也有Canvas格式的。canvas的支持自定义logo和文字在上面。

####如何使用

$(selector).qrcode(options);

将一个新生成的HTML元素添加到所选元素的QR代码中。如果所选元素已是画布元素,那么QR代码将绘制到它上面。

####选项

{
// 渲染方式: 'canvas', 'image' or 'div'
render: 'canvas', // 版本范围在 1 .. 40
minVersion: 1,
maxVersion: 40, // 误差校正水平: 'L', 'M', 'Q' or 'H'
ecLevel: 'L', // 如果绘制到现有画布上的像素偏移
left: 0,
top: 0, // 尺寸(使用像素)
size: 200, // 代码颜色或图像元素
fill: '#000', // 背景颜色或图像元素,null则代表透明背景
background: null, // 内容
text: 'no text', // 相对于模块宽度的角半径: 0.0 .. 0.5
radius: 0, // 模块中安静的区域
quiet: 0, // 模式
// 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.假如我要生成本页的二维码,支持IE浏览器,二维码大小为200x200.背景为白色,图像颜色为#1C1C1C,则可以使用这个代码:

var url = window.location.href || 'http://caibaojian.com';
$('#wx_qrcode').qrcode({
size:200,
render: "div",
fill: '#1C1C1C',
text: url
});

2.假如我要生成跟开始给的演示中一样的二维码,那我只能选择canvas或者image了。

//第二个
var url2 = 'http://caibaojian.com';
$('#canvas').qrcode({
size:200,
fill: '#1C1C1C',
text: url2,
ecLevel:'H',//误差校正水平选择最高级
mode:2,//label模式选择2
label: 'caibaojian.com',
fontname: 'Arial',
fontcolor: '#458fd2'
});

原文地址:

http://caibaojian.com/jquery-qrcode.html

jQuery.qrcode二维码插件生成网页二维码的更多相关文章

  1. jquery.qrcode二维码插件生成彩色二维码

    jquery.qrcode.js 是居于jquery类库的绘制二维码的插件,用它来实现二维码图形渲染支持canvas和table两种绘图方式. (jquery.qrcode.js 设置显示方式为tab ...

  2. Swift开发小技巧--扫描二维码,二维码的描边与锁定,设置扫描范围,二维码的生成(高清,无码,你懂得!)

    二维码的扫描,二维码的锁定与描边,二维码的扫描范围,二维码的生成(高清,无码,你懂得!),识别相册中的二维码 扫描二维码用到的三个重要对象的关系,如图: 1.懒加载各种类 // MARK: - 懒加载 ...

  3. idea字节码插件JClassLib——阅读JVM字节码

    idea字节码插件JClassLib--阅读JVM字节码 生成字节码文件并查看 查看字节码文件的方式:javac 文件名.java 即可生成.class文件,但是这种方式不方便 java:是运行字节码 ...

  4. jquery插件生成简单二维码

    除了利用第三方网站生成二维码外,这是一个比较简单的办法吧. <script src="/Scripts/jquery.qrcode.min.js" type="te ...

  5. QRCode.js:使用 JavaScript 生成微信二维码

    https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html 什么是 QRCode.js? QRCode.js 是一个用于生成二维码的 ...

  6. 深挖JDK动态代理(二):JDK动态生成后的字节码分析

    接上一篇文章深挖JDK动态代理(一)我们来分析一下JDK生成动态的代理类究竟是个什么东西 1. 将生成的代理类编程一个class文件,通过以下方法 public static void transCl ...

  7. JQuery的二维码插件

    jquery.qrcode.js 只有能重新生成的二维码才是安全的,大牛做了插件,满足我们吃糖的需求: 用法(除了翻译git上的readme我一下子想不到还能写点什么) 引用 <script t ...

  8. 使用jquery.qrcode生成二维码实现微信分享功能

    前言: 最近有个这样的需求,在pc端的商品详情页增加分享功能. 微博分享.QQ好友分享.QQ空间分享这些都很常见.但是微信分享我还没有手动写过(以前改过). 最终效果如下图: 解决方案:使用jquer ...

  9. 基于Metronic的Bootstrap开发框架经验总结(14)--条码和二维码的生成及打印处理

    在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多.本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理 ...

随机推荐

  1. Media Queries媒体查询

    Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的页面效果.Media Queries有其自己的使用规则.一个媒体查询由一个可选的媒体类型和媒体特性表达式,使 ...

  2. 面试官:数据库自增ID用完了会怎么样?

    看到这个问题,我想起当初玩魔兽世界的时候,25H难度的脑残吼的血量已经超过了21亿,所以那时候副本的BOSS都设计成了转阶段.回血的模式,因为魔兽的血量是int型,不能超过2^32大小. 估计暴雪的设 ...

  3. vue的favicon.ico的不能修改替换问题解决。

    vue的favicon.ico解决办法: 暴力替换图片: <link rel="icon" href="favicon.ico" type="i ...

  4. Nginx+FFmpeg实现RTSP转RTMP

    RTSP转RTMP 本次转流采用Centos+Nginx+FFmpeg实现,具体实现如下: 1. 安装Ngxin 安装详细略(可以选择安装阿里的Tengine,官方[下载路径](Download - ...

  5. 【JDBC核心】JDBC 概述

    JDBC 概述 数据的持久化 持久化(persistence):把数据保存到可掉电式存储设备中以供之后使用.大多数情况下,特别是企业级应用,数据持久化意味着将内存中的数据保存到硬盘上加以"固 ...

  6. #2020征文-开发板# 用鸿蒙开发AI应用(五)HDF 驱动补光灯

    目录: 前言 硬件准备 HDF 驱动开发 总结 前言上一篇,我们在鸿蒙上运行了第一个程序,这一篇我们来编写一个驱动开启摄像头的红外补光灯,顺便熟悉一下鸿蒙上的 HDF 驱动开发. 硬件准备先查一下原理 ...

  7. scp等不需要存入know_host

    1.修改sshd的配置文件 vi /etc/ssh/ssh_config 修改为如下 StrictHostKeyChecking no UserKnownHostsFile /dev/null 重启s ...

  8. 理解C#中的 async await

    前言 一个老掉牙的话题,园子里的相关优秀文章已经有很多了,我写这篇文章完全是想以自己的思维方式来谈一谈自己的理解.(PS:文中涉及到了大量反编译源码,需要静下心来细细品味) 从简单开始 为了更容易理解 ...

  9. 词嵌入之Word2Vec

    词嵌入要解决什么问题 在自然语言系统中,词被看作最为基本的单元,如何将词进行向量化表示是一个很基本的问题,词嵌入(word embedding)就是把词映射为低维实数域向量的技术. 下面先介绍几种词的 ...

  10. ABP vNext 实现租户Id自动赋值插入

    背景 在使用ABP vNext过程中,因为我们的用户体系庞大,所以一直与其他业务同时开发,在开发其他业务模块时,我们一直存在着误区:认为ABP vNext 自动处理了数据新增时的租户Id(Tenant ...