js-jquery-003-条形码-二维码【QR码】
一、基本使用
插件地址:https://github.com/jeromeetienne/jquery-qrcode
1、首先在页面中加入jquery库文件和qrcode插件。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
2、在页面中需要显示二维码的地方加入以下代码:
<div id="code"></div>
3、调用qrcode插件。
qrcode支持canvas和table两种方式进行图片渲染,默认使用canvas方式,效率最高,当然要浏览器支持html5。直接调用如下:
$('#code').qrcode("this plugin is great"); //任意字符串
也可以通过以下方式调用:
$("#code").qrcode({
render: "table", //table方式
width: 200, //宽度
height:200, //高度
text: "this plugin is great" //任意内容
});
二、识别中文
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("the plugins is great.这个插件还不错!");
$('#code').qrcode(str);
js-jquery-003-条形码-二维码【QR码】的更多相关文章
- (转)js jquery.qrcode生成二维码 带logo 支持中文
场景:公司最最近在开发二维码支付业务,所以需要做一个html5中的二维码生成和部署! 前天用js生成二维码,节省服务器资源及带宽 原版jquery.qrcode不能生成logo,本文采用的是修改版 1 ...
- jquery.qrcode.min.js(支持中文转化二维码)
详情请看:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/jqueryqrcodeminjs/ 今天还是要讲一下关于二维码的知识,前 ...
- jQuery生成QRcode二维码
jQuery生成QRcode二维码示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- 使用jquery.qrcode生成二维码及常见问题解决方案
转载文章 使用jquery.qrcode生成二维码及常见问题解决方案 一.jquery.qrcode.js介 jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery ...
- 使用jquery.qrcode生成二维码实现微信分享功能
前言: 最近有个这样的需求,在pc端的商品详情页增加分享功能. 微博分享.QQ好友分享.QQ空间分享这些都很常见.但是微信分享我还没有手动写过(以前改过). 最终效果如下图: 解决方案:使用jquer ...
- ZBar 是款桌面电脑用条形码/二维码扫描工具
ZBar 是款桌面电脑用条形码/二维码扫描工具 windows平台python 2.7环境编译安装zbar 最近一个项目需要识别二维码,找来找去找到了zbar和zxing,中间越过无数坑,总算基本 ...
- Atitit zxing二维码qr码识别解析
Atitit zxing二维码qr码识别解析 1.1. qr码识别解析 by zxing1 1.2. 解码lib:qrcode.jar 2 1.3. atitit.二维码生成总结java zxing ...
- DevExpress 使用条形码二维码控件打印
参考文章: https://www.cnblogs.com/wuhuacong/p/6112976.html 转载请注明出处:撰写人:伍华聪 其实主要是二维码的实现,在使用条形码控件时,又一个属性Sy ...
- Opencv+Zbar二维码识别(标准条形码/二维码识别)
使用Opencv+Zbar组合可以很容易的识别图片中的二维码,特别是标准的二维码,这里标准指的是二维码成像清晰,图片中二维码的空间占比在40%~100%之间,这样标准的图片,Zbar识别起来很容易,不 ...
- php中向前台js中传送一个二维数组
在php中向前台js中传送一个二维数组,并在前台js接收获取其中值的全过程方法: (1),方法说明:现在后台将数组发送到前台 echo json_encode($result); 然后再在js页面中的 ...
随机推荐
- core2.1独立布署,报错的原因。
除了所有的.dll和exe 还有一个特别重要的文件.deps.json,
- Spring.Net框架三:使用Spring.Net框架实现多数据库
在前面的两篇文章中简单介绍了Spring.Net和如何搭建Spring.Net的环境,在本篇文章中将使用Spring.Net实现多数据库的切换. 一.建立一个空白的解决方案,名称为“SpringDot ...
- 使用OpenFace进行人脸识别(1)
http://www.chinacloud.cn/show.aspx?id=25992&cid=12 本文中,笔者将介绍OpenFace中实现人脸识别的pipeline,这个pipeline可 ...
- 【Properties】Properties的load方法
Properties的load方法其实就是传进去一个输入流,字节流或者字符流,字节流利用InputStreamReader转化为字符流, 然后字符流用BufferedReader包装,Buffered ...
- 【BZOJ】2440: [中山市选2011]完全平方数(莫比乌斯+容斥原理+二分)
http://www.lydsy.com/JudgeOnline/problem.php?id=2440 我觉得网上很多题解都没说清楚...(还是我太弱了? 首先我们可以将问题转换为判定性问题,即给出 ...
- HDU1717--小数化分数2
这道题是将输入的小数(有可能是无限循环小数)来化为分数.刚開始看到以为枚举(千万不要嘲笑我),可是感觉不正确. 所以百度了小数化为分数的方法,然后看到了各种方法,原来是这这样,在这我採用的是小数化为分 ...
- jquery设置cors跨域
老版写法 $.support.cors = true; 新版写法 crossDomain: true
- ulimit命令学习
通过ulimit -n命令可以查看linux系统里打开文件描述符的最大值,一般缺省值是1024,对一台繁忙的服务器来说,这个值偏小,所以有必要重新设置linux系统里打开文件描述符的最大值.那么应该在 ...
- ChemDraw Pro绘制无环链结构的两种方法
ChemDraw Pro 14是一款专门针对化学图形绘制而开发制作的编辑软件,是目前工科类常用的绘制化学结构工具,用于快速绘制常用的环结构组成.以下教程讲解ChemDraw Pro绘制无环链结构的两种 ...
- 【C++缺省函数】 空类默认产生的6个类成员函数
1.缺省构造函数. 2.缺省拷贝构造函数. 3. 缺省析构函数. 4.缺省赋值运算符. 5.缺省取址运算符. 6. 缺省取址运算符 const. <span style="font-s ...