一、基本使用

插件地址: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码】的更多相关文章

  1. (转)js jquery.qrcode生成二维码 带logo 支持中文

    场景:公司最最近在开发二维码支付业务,所以需要做一个html5中的二维码生成和部署! 前天用js生成二维码,节省服务器资源及带宽 原版jquery.qrcode不能生成logo,本文采用的是修改版 1 ...

  2. jquery.qrcode.min.js(支持中文转化二维码)

    详情请看:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/jqueryqrcodeminjs/ 今天还是要讲一下关于二维码的知识,前 ...

  3. jQuery生成QRcode二维码

    jQuery生成QRcode二维码示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  4. 使用jquery.qrcode生成二维码及常见问题解决方案

    转载文章  使用jquery.qrcode生成二维码及常见问题解决方案 一.jquery.qrcode.js介 jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery ...

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

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

  6. ZBar 是款桌面电脑用条形码/二维码扫描工具

    ZBar 是款桌面电脑用条形码/二维码扫描工具 windows平台python 2.7环境编译安装zbar   最近一个项目需要识别二维码,找来找去找到了zbar和zxing,中间越过无数坑,总算基本 ...

  7. Atitit zxing二维码qr码识别解析

    Atitit zxing二维码qr码识别解析 1.1. qr码识别解析 by zxing1 1.2. 解码lib:qrcode.jar  2 1.3. atitit.二维码生成总结java zxing ...

  8. DevExpress 使用条形码二维码控件打印

    参考文章: https://www.cnblogs.com/wuhuacong/p/6112976.html 转载请注明出处:撰写人:伍华聪 其实主要是二维码的实现,在使用条形码控件时,又一个属性Sy ...

  9. Opencv+Zbar二维码识别(标准条形码/二维码识别)

    使用Opencv+Zbar组合可以很容易的识别图片中的二维码,特别是标准的二维码,这里标准指的是二维码成像清晰,图片中二维码的空间占比在40%~100%之间,这样标准的图片,Zbar识别起来很容易,不 ...

  10. php中向前台js中传送一个二维数组

    在php中向前台js中传送一个二维数组,并在前台js接收获取其中值的全过程方法: (1),方法说明:现在后台将数组发送到前台 echo json_encode($result); 然后再在js页面中的 ...

随机推荐

  1. core2.1独立布署,报错的原因。

    除了所有的.dll和exe 还有一个特别重要的文件.deps.json,

  2. Spring.Net框架三:使用Spring.Net框架实现多数据库

    在前面的两篇文章中简单介绍了Spring.Net和如何搭建Spring.Net的环境,在本篇文章中将使用Spring.Net实现多数据库的切换. 一.建立一个空白的解决方案,名称为“SpringDot ...

  3. 使用OpenFace进行人脸识别(1)

    http://www.chinacloud.cn/show.aspx?id=25992&cid=12 本文中,笔者将介绍OpenFace中实现人脸识别的pipeline,这个pipeline可 ...

  4. 【Properties】Properties的load方法

    Properties的load方法其实就是传进去一个输入流,字节流或者字符流,字节流利用InputStreamReader转化为字符流, 然后字符流用BufferedReader包装,Buffered ...

  5. 【BZOJ】2440: [中山市选2011]完全平方数(莫比乌斯+容斥原理+二分)

    http://www.lydsy.com/JudgeOnline/problem.php?id=2440 我觉得网上很多题解都没说清楚...(还是我太弱了? 首先我们可以将问题转换为判定性问题,即给出 ...

  6. HDU1717--小数化分数2

    这道题是将输入的小数(有可能是无限循环小数)来化为分数.刚開始看到以为枚举(千万不要嘲笑我),可是感觉不正确. 所以百度了小数化为分数的方法,然后看到了各种方法,原来是这这样,在这我採用的是小数化为分 ...

  7. jquery设置cors跨域

    老版写法 $.support.cors = true; 新版写法 crossDomain: true

  8. ulimit命令学习

    通过ulimit -n命令可以查看linux系统里打开文件描述符的最大值,一般缺省值是1024,对一台繁忙的服务器来说,这个值偏小,所以有必要重新设置linux系统里打开文件描述符的最大值.那么应该在 ...

  9. ChemDraw Pro绘制无环链结构的两种方法

    ChemDraw Pro 14是一款专门针对化学图形绘制而开发制作的编辑软件,是目前工科类常用的绘制化学结构工具,用于快速绘制常用的环结构组成.以下教程讲解ChemDraw Pro绘制无环链结构的两种 ...

  10. 【C++缺省函数】 空类默认产生的6个类成员函数

    1.缺省构造函数. 2.缺省拷贝构造函数. 3. 缺省析构函数. 4.缺省赋值运算符. 5.缺省取址运算符. 6. 缺省取址运算符 const. <span style="font-s ...