一.简介

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. CertUtil.exe被利用来下载恶意软件

    1.前言 经过国外文章信息,CertUtil.exe下载恶意软件的样本. 2.实现原理 Windows有一个名为CertUtil的内置程序,可用于在Windows中管理证书.使用此程序可以在Windo ...

  2. 『实践』百度地图给多个marker添加右键菜单(删除、更新)

    js: $.getJSON("./GetStationPlaceServlet",function(json){ for(var i=0;i<json.length;i++) ...

  3. 正则表达式基础->

    描述:(grep) 正则表达式是一种字符模式,用于在查找过程中匹配指定的字符.在大多数程序里,正则表达式都被置于两个正斜杠之间,它匹配被查找的行中任何位置出现的相同模式 基础正则表达式 正则表达式 描 ...

  4. mac 升级10.12 php debug 环境 跑不起的解决 解决方案

    1:  mac 升级后发现 php从原来的5.5  升级为 5.6 了...   所以以前 php.ini 里面的配置全部都没有了. mac 给我们做了备份2:  没办法只能升级php对应的插件到5. ...

  5. linux查看内存、CPU占用资源最多的进程

    [内存占用] #利用ps命令,默认使用ps参数会显示的结果 ps -aux USER PID %CPU %MEM VSZ RSS TTY STAT START TIME COMMAND root 1 ...

  6. 数据库--mysql介绍

    一:什么是数据库 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库, 每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据. 我们也可以将数据存储在文件 ...

  7. Extjs6设置Store、Ajax、form的请求方式(GET、POST)

    Extjs6 设置Store.Ajax.form的请求方式(GET.POST) Ajax请求和Form的submit方法设置请求方式和原来一样,使用method : 'POST'设置 // 表单提交 ...

  8. Luogu P1750 【出栈序列】

    一眼(万年)贪心minn设小调不出来祭 首先要保证更靠前的输出更小那么容易想到,对于之后可能入栈的元素(即栈的剩余空间仍能装下的所有元素),我们可以取其中的最小值minn,和栈顶元素$top$比较,如 ...

  9. How to tell your iPhone application that location services are required | The Agile Warrior

    div{padding-bottom:10px}.b_vPanel>div:last-child{padding:0}.banner a{color:#1020d0} --> Below ...

  10. ES按资源类型统计个数

    一.目标:统计各类型资源的个数,输出详细报表 http://10.10.6.225:9200/dsideal_db/t_resource_info/ _mapping {  "propert ...