一、基本使用

插件地址: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. man page用法

    通过man man可查看man page的具体用法. 1   Executable programs or shell commands       2   System calls (functio ...

  2. ResultSet是结果集对象

    ResultSet是结果集对象 DriverManager管理一组驱动程序 PreparedStatement预编译的,用来发送和执行SQL语句的

  3. gsoap 学习 1-自己定义接口生成头文件

    接口头文件的格式在向导中没有看到明确的说明性的内容,但通过看开发包中示例程序中头文件定义和通过wsdl生成的头文件的内容,可以发现,头文件中都会出现以下几行信息 //gsoap ns service ...

  4. ES插件elasticsearch-mapper-attachments 2.3.4及各个版本正确下载地址

    ES版本更新那么快,文档链接你也倒是跟上啊, 插件zip包下载,都是error link...难不成是我网络原因? 下载zip页面报错信息: This XML file does not appear ...

  5. 权限模块_使用权限_实现主页面的效果_显示左侧菜单&只显示有权限的菜单项

    权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...

  6. JS-实时修改在textarea里面的span(实际输入的文字)

    解决办法: 在开发中,多少会遇到一些界面,输入限制字数. 例如: //页面加载完毕 $(function() { //descrip是textarea的id $("#descrip" ...

  7. jquery与javescript的区别(一)

    一.找元素: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g ...

  8. cobbler上部署centos系统修改网卡地址成eth0

    编辑cobbler的profile文件:   cobbler profile edit --name=CentOS-7.2-x86_64 --kopts='net.ifnames=0 biosdevn ...

  9. 用angular引入复杂的json文件2

    昨天我们也说了一下angular引入复杂json文件的方法,今天我们再来学习一种方法,而且更简单,更快捷. 首先我们引入一个angular插件,并且写上引入模块和控制台,在html中书写上模块名和控制 ...

  10. java面向对象、构造方法 之内部类

    UML类图 UML  Unified Modeling Language (UML)又称统一建模语言或标准建模语言 在一个类中      属性表示这类事物的性质(描述它的数据)      方法表示这类 ...