使用jQuery的插件qrcode生成二维码(静态+动态生成)及常见问题解决方法
一.简介
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生成二维码(静态+动态生成)及常见问题解决方法的更多相关文章
- jquery.qrcode.js生成二维码(前端生成二维码)
官网地址:http://jeromeetienne.github.io/jquery-qrcode/ 第一步引入插件: <script type='text/javascript' src='h ...
- QrCode C#生成二维码 及JavaScript生成二维码
一 C#的二维码 示例: class Program { static void Main(string[] args) { QrEncoder qrEncoder = new QrEncode ...
- vue 使用QRcode生成二维码或在线生成二维码
参考:https://blog.csdn.net/zhuswy/article/details/80267748 1.安装qrcode.js npm install qrcodejs2 --save ...
- 如何利用ThoughtWorks.QRCode 生成二维码
1.引用ThoughtWorks.QRCode.dll 在nuget上查找即可引用,也可自行下载 2.生成二维码静态方法 参数: 二维码内容:fileUrl 二维码图片名:typeName #regi ...
- python_使用qrcode生成二维码
1.功能 使用qrcode生成二维码 2.代码 #生成二维码: import qrcode #根据url生成二维码 def qrcodeWithUrl(url): img = qrcode.make( ...
- java生成二维码的几个方法
1: 使用SwetakeQRCode在Java项目中生成二维码 http://swetake.com/qr/ 下载地址 或着http://sourceforge.jp/projects/qrcode/ ...
- java生成二维码的几种方式
1: 使用SwetakeQRCode在Java项目中生成二维码 http://swetake.com/qr/ 下载地址 或着http://sourceforge.jp/projects/qrcode/ ...
- 利用PHP生成二维码(转)
导读:在二维码广泛应用化的今天,在web站点中自动生成对应的二维码是最基础的需求.文章介绍了使用PHP自动生成二维码的三种方式. get方法实现方式一: $urlToEncode="163. ...
- 在java中生成二维码,并直接输出到jsp页面
在java中生成的二维码不存到磁盘里要直接输出到页面上,这就需要把生成的二维码直接以流的形式输出到页面上,我用的是myeclipse 和 tomcat 它的原理是:在加载页面时,根据img的src(c ...
- spring boot:用zxing生成二维码,支持logo(spring boot 2.3.2)
一,zxing是什么? 1,zxing的用途 如果我们做二维码的生成和扫描,通常会用到zxing这个库, ZXing是一个开源的,用Java实现的多种格式的1D/2D条码图像处理库. zxing还可以 ...
随机推荐
- DRM学习总结(1)--- DRM框架介绍
一.DRM 简介 In computing, the Direct Rendering Manager (DRM), a subsystem of the Linux kernel, interfac ...
- 一步一步搭建oracle 11gR2 rac+dg之环境准备(二)【转】
一步一步在RHEL6.5+VMware Workstation 10上搭建 oracle 11gR2 rac + dg 之环境准备 (二) 一步一步搭建oracle 11gR2 rac+dg之环境准备 ...
- webpack3学习笔记
地址:https://segmentfault.com/a/1190000006843916 地址:https://www.chungold.com/my/course/32 地址:http://js ...
- KVM和远程管理工具virt-manager
kvm在server端的部署(针对rhel6系统,可以构建本地更新源) 注意:如果只是安装管理工具,可以试试直接执行8步骤 1.对服务器实行kvm虚拟化首先需要确认服务器的物理硬件是否支持 cat / ...
- JAVA复习笔记分布式篇:zookeeper
前言:终于到分布式篇,前面把JAVA的一些核心知识复习了一遍,也是一个JAVA程序员最基本要掌握的知识点,接下来分布式的知识点算是互联网行业的JAVA程序员必备的技能: 概念:ZooK ...
- 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 ...
- 【剑指Offer面试题】 九度OJ1389:变态跳楼梯
转自:http://www.myexception.cn/program/1973966.html 时间限制:1 秒内存限制:32 兆特殊判题:否提交:2331解决:1332 题目描述: 一只青蛙一次 ...
- Python装饰器讲解
Python装饰器讲解 定义:本质是函数,就是为其他函数添加附加功能.原则:1.不能修改被装饰的函数的源代码 2.不能修改被装饰的函数的调用方式 import time def timmer(func ...
- Android Studio3.x新的依赖方式(implementation、api、compileOnly)
https://blog.csdn.net/yuzhiqiang_1993/article/details/78366985?locationNum=6&fps=1 Android Studi ...
- CCF CSP 201409-2 画图
CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201409-2 画图 问题描述 在一个定义了直角坐标系的纸上,画一个(x1,y1)到(x2,y ...