文档章节

jquery.qrcode 生成二维码

Jack088
 Jack088
发布于 2015/07/30 12:55
字数 407
阅读 407
收藏 11

识别字符串

1、首先下载 jquery.qrcode 插件后,在页面中引入 jquery 库文件和 qrcode 插件。

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.qrcode.min.js"></script> 

2、在页面中需要显示二维码的地方加入标签:

<div id="qrcode" style="text-align: center;"></div> 

3、调用 qrcode 插件。

qrcode 支持 canvas 和 table 两种方式进行图片渲染,默认使用 canvas 方式,效率最高,当然要浏览器支持html5。调用如下:

$('#qrcode').qrcode("http://www.baidu.com"); //任意字符串 

也可以通过以下方式调用:

$("#qrcode").qrcode({ 
    render: "table"//table方式 
    width: 200//宽度 
    height:200//高度 
    text: "www.baidu.com" //任意内容 
}); 

这样就可以在页面中生成一个二维码。接下来就可以用手机“扫一扫”功能读取二维码信息。

识别中文

我们试验的时候发现不能识别中文内容的二维码,通过查找多方资料了解到,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("中文二维码!"); 
$('#qrcode').qrcode(str); 


ps:

jquery.qrcode.min.js 下载地址

https://github.com/jack0888/jquery-qrcode

https://github.com/jeromeetienne/jquery-qrcode

© 著作权归作者所有

Jack088
粉丝 44
博文 528
码字总数 76455
作品 0
扬州
程序员
私信 提问
js二维码生成插件“jquery.qrcode.min.js”

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>生成二维码</title> <script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></scri......

泉天下
05/20
0
0
使用jquery.qrcode生成二维码

二维码应用已经渗透到我们的生活工作当中,您只需要用手机对着二维码“扫一扫”即可获得所对应的信息,方便我们了解商家、购物、观影等等。本文将介绍一款基于jquery的二维码生成插件qrcode,...

zyt_1978
2016/04/18
36
0
JS生成二维码 jquery.qrcode 插件

使用jquery.qrcode生成二维码 二维码应用已经成为app 和网页的标配,那么在开发中不少人问,怎么生成二维码,现在我就讲解一种 js 直接生成图片的方法,后台都无需参与,前端就是牛 本文将介...

xllily_11
2017/11/14
0
0
解决jquery.qrcode中文识别问题

用法 识别中文 我们试验的时候发现不能识别中文内容的二维码,通过查找多方资料了解到,jquery-qrcode是采用charCodeAt()方式进行编码转换的。而这个方法默认会获取它的Unicode编码,如果有中...

WolfX
2016/07/25
51
0
frogchou/FiwanQRCode

#FiwanQRCode ####飞网QR二维码生成器,用户可以通过这个工具生成QR码。面向开发人员,和经常接触使用各种二维码的人,这个工具能帮助开发二维码的人员生成各种格式二维码,包括png,jpg,b...

frogchou
2017/04/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

rocketmq之源码分析阶段总结(二十一)

RocketMQ是队列模型的消息中间件,具有高性能,高可靠,高实时,分布式的特点。同时支持分布式事物的两阶段提交,实现在分布式环境的事物操作。 1,nameserv是分布式的部署,并且相互之间不通...

wangshuaixin
25分钟前
2
0
小猿圈linux之在mac上安装 docker

docker极大提高了应用的运行效率,降低了云计算资源供应的成本,同时让应用的部署、测试和分发都变得前所未有的高效和轻松!docker是一个容器,不像kvm,他是真实的系统,启动时,KVM消耗的资...

小猿圈加加
31分钟前
1
0
spring aop 代理private方法 报错的问题分析

spring aop 代理private方法报空指针的问题 这两天做aop切面日志时,发现private方法报空指针。 原切入点配置如下: @Pointcut("@within(org.springframework.web.bind.annotation.RestC...

my_juke
35分钟前
2
0
c 基础教程六:c 循环结构

有的时候,我们可能需要多次执行同一块代码,c 语言提供了如下几种循环,各有特色。 while 循环 for 循环 do-while 循环 while 循环 只要给定的条件为真,C 语言中的 while 循环语句会重复执...

故城以南丶思念不安
54分钟前
4
0
spark 常见操作

为spark DataFrom 添加一个为 空的新列,使用UDF函数 想产生一个IntegerType类型列为null的DataFrame该怎么做。 import org.apache.spark.sql.functions._import org.apache.spark.sql.type...

蜉先生
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部