一.简介

1.说明

qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式,您可以到https://github.com/jeromeetienne/jquery-qrcode获取最新的代码。

2.语法格式 syntax

$(selector).qrcode(options);

3.参数说明 options

 {
// render method: 'canvas', 'image' or 'div'
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
}

二.使用方法

1.静态添加

①.首先在页面中加入jquery库文件和qrcode插件:

 <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>

②.在页面中需要显示二维码的地方加入以下代码:

 <div id="code"></div> 

③.调用qrcode插件:

qrcode支持canvas和table两种方式进行图片渲染,默认使用canvas方式,效率最高,当然要浏览器支持html5。直接调用如下:

 $('#code').qrcode("http://www.baidu.com"); //任意字符串 

您也可以通过以下方式调用:

 $("#code").qrcode({
render: "table", //table方式
width: 200, //宽度
height:200, //高度
text: "www.baidu.com" //任意内容
});

2.动态添加

①.首先在页面中加入jquery库文件和qrcode插件(同上):

1 <script type="text/javascript" src="jquery.js"></script>
2 <script type="text/javascript" src="jquery.qrcode.min.js"></script>

②.在页面中需要显示二维码的地方加入以下代码(同上):

1 <div id="code"></div> 

③.调用qrcode插件:

 var QRcode = $('<div>');
QRcode.attr('id' ,"androidQR"); //为<div>添加属性id
QRcode.css('float' ,"right"); //这里演示如何进行css操作
QRcode.qrcode({
width: 110,
height:110,
text: 'http://www.baidu.com'
});
$('#code').append(QRcode); //将二维码元素添append到页面上id为‘code’的元素上

三.识别中文

jquery-qrcode是采用charCodeAt()方式进行编码转换的。而这个方法默认会获取它的Unicode编码,如果有中文内容,在生成二维码前就要把字符串转换成UTF-8,然后再生成二维码。您可以通过以下函数来转换中文字符串:

 function toUtf8(str) {
var out, i, len, c;
out = "";
len = str.length;
for(i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}

示例代码如下:

 var str = toUtf8("你真可爱!");
$('#code').qrcode(str);

参考: http://www.helloweba.com/view-blog-226.html

    https://larsjung.de/jquery-qrcode/

四.其他生成二维码的方法

除了jquery,还有很多可以生成二维码的方法,例如:

1.利用Google API生成二维码

2.使用PHP二维码生成类库PHP QR Code生成二维码

3.使用原生JavaScript生成二维码

等方法,本文不作说明。

1和2请参考: http://www.jb51.net/article/48124.htm

3请参考:  http://www.cnblogs.com/yisheng163/p/4472687.html

使用jQuery的插件qrcode生成二维码(静态+动态生成)及常见问题解决方法的更多相关文章

  1. jquery.qrcode.js生成二维码(前端生成二维码)

    官网地址:http://jeromeetienne.github.io/jquery-qrcode/ 第一步引入插件: <script type='text/javascript' src='h ...

  2. QrCode C#生成二维码 及JavaScript生成二维码

    一 C#的二维码    示例: class Program { static void Main(string[] args) { QrEncoder qrEncoder = new QrEncode ...

  3. vue 使用QRcode生成二维码或在线生成二维码

    参考:https://blog.csdn.net/zhuswy/article/details/80267748 1.安装qrcode.js npm install qrcodejs2 --save ...

  4. 如何利用ThoughtWorks.QRCode 生成二维码

    1.引用ThoughtWorks.QRCode.dll 在nuget上查找即可引用,也可自行下载 2.生成二维码静态方法 参数: 二维码内容:fileUrl 二维码图片名:typeName #regi ...

  5. python_使用qrcode生成二维码

    1.功能 使用qrcode生成二维码 2.代码 #生成二维码: import qrcode #根据url生成二维码 def qrcodeWithUrl(url): img = qrcode.make( ...

  6. java生成二维码的几个方法

    1: 使用SwetakeQRCode在Java项目中生成二维码 http://swetake.com/qr/ 下载地址 或着http://sourceforge.jp/projects/qrcode/ ...

  7. java生成二维码的几种方式

    1: 使用SwetakeQRCode在Java项目中生成二维码 http://swetake.com/qr/ 下载地址 或着http://sourceforge.jp/projects/qrcode/ ...

  8. 利用PHP生成二维码(转)

    导读:在二维码广泛应用化的今天,在web站点中自动生成对应的二维码是最基础的需求.文章介绍了使用PHP自动生成二维码的三种方式. get方法实现方式一: $urlToEncode="163. ...

  9. 在java中生成二维码,并直接输出到jsp页面

    在java中生成的二维码不存到磁盘里要直接输出到页面上,这就需要把生成的二维码直接以流的形式输出到页面上,我用的是myeclipse 和 tomcat 它的原理是:在加载页面时,根据img的src(c ...

  10. spring boot:用zxing生成二维码,支持logo(spring boot 2.3.2)

    一,zxing是什么? 1,zxing的用途 如果我们做二维码的生成和扫描,通常会用到zxing这个库, ZXing是一个开源的,用Java实现的多种格式的1D/2D条码图像处理库. zxing还可以 ...

随机推荐

  1. DRM学习总结(1)--- DRM框架介绍

    一.DRM 简介 In computing, the Direct Rendering Manager (DRM), a subsystem of the Linux kernel, interfac ...

  2. 一步一步搭建oracle 11gR2 rac+dg之环境准备(二)【转】

    一步一步在RHEL6.5+VMware Workstation 10上搭建 oracle 11gR2 rac + dg 之环境准备 (二) 一步一步搭建oracle 11gR2 rac+dg之环境准备 ...

  3. webpack3学习笔记

    地址:https://segmentfault.com/a/1190000006843916 地址:https://www.chungold.com/my/course/32 地址:http://js ...

  4. KVM和远程管理工具virt-manager

    kvm在server端的部署(针对rhel6系统,可以构建本地更新源) 注意:如果只是安装管理工具,可以试试直接执行8步骤 1.对服务器实行kvm虚拟化首先需要确认服务器的物理硬件是否支持 cat / ...

  5. JAVA复习笔记分布式篇:zookeeper

        前言:终于到分布式篇,前面把JAVA的一些核心知识复习了一遍,也是一个JAVA程序员最基本要掌握的知识点,接下来分布式的知识点算是互联网行业的JAVA程序员必备的技能:     概念:ZooK ...

  6. Effective STL 学习笔记 Item 26: Prefer Iterator to reverse_iterator and const_rever_itertor

    Effective STL 学习笔记 Item 26: Prefer Iterator to reverse_iterator and const_rever_itertor */--> div ...

  7. 【剑指Offer面试题】 九度OJ1389:变态跳楼梯

    转自:http://www.myexception.cn/program/1973966.html 时间限制:1 秒内存限制:32 兆特殊判题:否提交:2331解决:1332 题目描述: 一只青蛙一次 ...

  8. Python装饰器讲解

    Python装饰器讲解 定义:本质是函数,就是为其他函数添加附加功能.原则:1.不能修改被装饰的函数的源代码 2.不能修改被装饰的函数的调用方式 import time def timmer(func ...

  9. Android Studio3.x新的依赖方式(implementation、api、compileOnly)

    https://blog.csdn.net/yuzhiqiang_1993/article/details/78366985?locationNum=6&fps=1 Android Studi ...

  10. CCF CSP 201409-2 画图

    CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201409-2 画图 问题描述 在一个定义了直角坐标系的纸上,画一个(x1,y1)到(x2,y ...