JavaScript-Tool:jquery.qrcode.js
ylbtech-JavaScript-Tool:jquery.qrcode.js |
1.返回顶部 |
如何使用它
将jquery.qrcode.min.js和jquery添加到您的网页中
<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
然后创建一个DOM元素去包含生成qr码。
<div id="qrcode"></div>
然后你在此容器中的添加qrcode
<script>
jQuery(function(){
jQuery('#qrcode').qrcode("http://www.jq22.com");
})
</script>
就这么简单,您想要的二维码就生成了。
进阶用法
指定二维码的生成方式:
可以在调用函数的同时输入想要的二维码生成方式(table/canvas)。
//使用table生成
jQuery('#qrcode').qrcode({
render: "table",
text: "http://www.jq22.com"
}); //使用canvas生成
jQuery('#qrcode').qrcode({
render: "canvas",
text: "http://www.jq22.com"
});
指定生成二维码的大小:
可以在调用函数的同时输入想要生成二维码的宽度和高度即可指定生成的二维码的大小。
//生成100*100(宽度100,高度100)的二维码
jQuery('#qrcode').qrcode({
render: "canvas", //也可以替换为table
width: 100,
height: 100,
text: "http://www.jq22.com"
});
指定生成二维码的色彩样式:
可以在调用函数的同时输入想要生成二维码的前景色和背景色即可指定生成的二维码的色彩样式。
//生成前景色为红色背景色为白色的二维码
jQuery('#qrcode').qrcode({
render: "canvas", //也可以替换为table
foreground: "#C00",
background: "#FFF",
text: "http://www.jq22.com"
});
中文ULR生成方法:
jQuery("#output").qrcode(encodeURI("http://中文中文"));//使用encodeURI进行转码
2.返回顶部 |
jquery.qrcode.js是依赖jquery的,所以要先引入jquery再引入jquery.qrcode.js
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
在页面上添加一个div标签,用于创建渲染区域
<div id="qrcode"></div>
通过下面代码就可以生成一个默认256×256大小的二维码
<script type="text/javascript">
jQuery('#qrcode').qrcode("http://www.cnblogs.com/HtmlCss3/");
</script>
效果图
改变它的大小、二维码颜色、背景色配置:

jQuery("#qrcode").qrcode({
render: "canvas", // 渲染方式有table方式和canvas方式
width: 256, //默认宽度
height: 256, //默认高度
text: "http://www.cnblogs.com/HtmlCss3/", //二维码内容
typeNumber: -1, //计算模式一般默认为-1
correctLevel: 2, //二维码纠错级别
background: "#ffffff", //背景颜色
foreground: "#000000" //二维码颜色
});

jquery.qrcode.js二维码内容是不支持中文的,如果出现中文,结果就是一串乱码,这个主要是两者的编码方式不一样所导致的,中文一般情况下是UTF-16格式,如果想要支持中文,那就把二维码内容统一改成UTF-8格式的,顺便贴一下转换的代码:

function utf16to8(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;
}

当你在配置的时候把二维码的内容转换一下就可以了~
text: utf16to8("文字内容") //二维码内容
有时候呢领导可能会让你把自己公司的logo放上去,但是jquery.qrcode.js又不支持这种自定义logo,这时候肿么办呢?其实也很简单,在div里创建一个img利用定位很容易就可以搞定它了
3.返回顶部 |
4.返回顶部 |
5.返回顶部 |
6.返回顶部 |
![]() |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
JavaScript-Tool:jquery.qrcode.js的更多相关文章
- 生成二维码的 jQuery 插件:jquery.qrcode.js的中文乱码问题
在使用jquery.qrcode.js这个插件生成二维码的时候发现并不能识别中文. 原因在于:jquery-qrcode是采用charCodeAt()方式进行编码转 换的. 而这个方法默认会获取它的U ...
- 动态生成二维码插件 jquery.qrcode.js
前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...
- jQuery.qrcode.js客户端生成二维码,支持中文并且可以生成LOGO
描述: jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码.此插件是能够独立使用的,体积也比较 ...
- jquery二维码生成插件jquery.qrcode.js
插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 转载于:http://www.jq22.com ...
- 如何使用jquery.qrcode.js插件生成二维码
1.首先需要准备 jquery.qrcode.js 和 jquery.js github地址:https://github.com/lrsjng/jquery-qrcode 官方文档地址:http:/ ...
- jQuery生成二维条形码 jquery.qrcode.js
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- 使用jquery.qrcode.js生成二维码
通常生成二维码的方式有两种:第一种是java代码的形式,第二种是通过Js方式. 在这里我做个记录,用js生成二维码,可以在官网下载源码:http://jeromeetienne.github.io/j ...
- 转:jquery validate.js表单验证
这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码代码如下: <script type="text/javascript" ...
- 修改二维码生成插件jquery.qrcode.js支持加入自定义LOGO
1,将jquery.qrcode.min.js和jquery添加到您的网页中 <script src="jquery.min.js"></script> & ...
随机推荐
- 以面试官的角度看strcpy函数
一:笔试或者面试的总结 之 一 (1)在笔试或者面试中常常会被问道,strcpy memmove memcpy 函数的实现.有时也会问你STL 中string的 split 和 trim的实现.有的 ...
- word中更改图片和标题之间的垂直距离
word中插入图片后.往往须要给图片加上标题. 你插入图片和给图片插入标题时,word用的是默认的格式给你插入的图片和标题. 假如原来的paragraph是2倍行距.你的图片和标题之间的距离也是2倍行 ...
- sonar+Jenkins代码覆盖率检测
最近公司在搞代码覆盖率检查,简单看了一下结合Jenkins +jacoco + sonar做了一下主要涉及到项目层面和Jenkins层面的东西: 这里只讲一下集成,不讲解sonar的安装Jenkins ...
- Linux 磁盘空间查询&&解决Linux 中“磁盘空间不足”的问题
一.linux 查看目录的剩余空间大小 两个命令df .du结合比较直观 df -h 查看整台服务器的硬盘使用情况 du -lh --max-depth=1 : 查看当前目录下一级子文件和子目录占用的 ...
- Audio原理图设计
1.DMIC 1)当双MIC时,通过MIC上的Selection PIN脚PULL U/D进行左右channel选择.
- beifen---http://vdisk.weibo.com/s/uhCtnyUhD0Ooc
- emoji字符不能插入MySQL数据库,提示“'\xF0\x9F\x98\x84' for column 'XXXX' at row 1”
从网络中取下的数据解析后不能插入数据库,提示某个字段有问题,问题提示如下: SQLException: Incorrect string value: '\xF0\x9F\x98\x84' for c ...
- 开发指南专题十一:JEECG微云高速开发平台--基础用户权限
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/zhangdaiscott/article/details/26580037 开发指南专题 ...
- Codeforces696 Round #362 (Div. 1)(vp) A~D题解
很久没有打比赛了,内部模拟赛天天垫底,第一次vp之旅又是和**一样,这样下去GDOI之后直接退役算了 整场都在忘开LL A. Lorenzo Von Matterhorn 这个题一看我就想直接虚树+树 ...
- LightOJ1370 Bi-shoe and Phi-shoe —— 欧拉函数
题目链接:https://vjudge.net/problem/LightOJ-1370 1370 - Bi-shoe and Phi-shoe PDF (English) Statistics ...