前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用:
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: , //默认宽度
height: , //默认高度
text: "http://www.cnblogs.com/HtmlCss3/", //二维码内容
typeNumber: -1, //计算模式一般默认为-1
correctLevel: , //二维码纠错级别
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利用定位很容易就可以搞定它了
吧嗒吧嗒终于完了,今天就这些了~
--------每天进步一点点--------
动态生成二维码插件 jquery.qrcode.js的更多相关文章
-
生成二维码(jquery.qrcode.min.js插件)
生成二维码:参看GitHub资源https://github.com/jeromeetienne/jquery-qrcode 直接上代码:(都需要引入jQuery.js 1.引入(jquery.qr ...
-
Jquery.Qrcode在客户端动态生成二维码并添加自定义Logo
0 Jquery.Qrcode简介 Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服 ...
-
qrcode.js 动态生成二维码
用qrcode.js动态生成二维码图片非常简单,只需要引入qrcode.js即可使用,而且可以自定义图片大小.背景色等信息. 1.jsp代码---页面头部引入qrcode.js,jquery文件可选 ...
-
js生成二维码的jquery组件–qrcode
js生成二维码的jquery组件–qrcode 2015/01/30 / 2508 VIEWS / JAVASCRIPT, JQUERY 有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. ...
-
jquery动态生成二维码添加自定义logo
动态生成二维码中间带logo. jquery.qrcode.js 动态生成二维码api很简单. 引入jquer(版本任意),引入jquery.qrcode.js 不需要中间带logo这样就可以了.带l ...
-
js动态生成二维码
一.使用jquery.qrcode生成二维码 1.首先在页面中加入jquery库文件和qrcode插件 <script type="text/javascript" src= ...
-
动态生成二维码并利用canvas合成出一张图片(类似海报、分享页)
在前端开发并打算推广一个APP的时候,推广页是免不了的,而推广页的展示方式一般是给人家一个二维码,让别人自己去安装APP,这样前段任务也达到了,这次写这篇文章的原因主要还是总结一下,其中有很多不完善的 ...
-
thinkphp5动态生成二维码实例总结
thinkphp5关于动态生成二维码类库总结: 遇到的最大问题如下:我想大部分人也碰到过,所有觉得有必要总结下: thinkphp5提示找不到Qrcode类,可是自己明明都放置到了,vendor 目录 ...
-
转: jquery.qrcode.js生成二维码插件&;转成图片格式
原文地址: https://blog.csdn.net/u011127019/article/details/51226104 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持can ...
随机推荐
-
C#.NET序列化XML、JSON、二进制微软自带DLL与newtonsoft(json.net)
序列化是将对象转换成另一种格式(XML.json.二进制byte[]) JSON序列化 .NET中有三种常用的JSON序列化的类,分别是: Newtonsoft.Json.JsonConvert类(推 ...
-
深入理解JAVA的多态性[转]
昨天看到一个关于多态性的帖子,参考了回帖者的理解,加入了一些自己的看法,整理出来供大家参考,不一定完全正确,欢迎大家批评指正. (一)相关类 class A ...{ public S ...
-
Python如何实现单步调试
遇到大型python项目,如何定位问题和监控程序的运行状态是一个程序员必须掌握的技能,今天小编为你带来python程序的单步调试方法,方便易用,简单易记! 首先你需要在所调试程序的开头中:import ...
-
poj_2104: K-th Number 【主席树】
题目链接 学习了一下主席树,感觉具体算法思路不大好讲.. 大概是先建个空线段树,然后类似于递推,每一个都在前一个"历史版本"的基础上建立一个新的"历史版本",每 ...
-
lesson - 6 课程笔记
一.df 作用: 显示磁盘分区上的可使用的磁盘空间, 默认显示单位为kb . 可以利用该命令来获取硬盘被占用了多少空间,目前还剩下多少空间的等信息. 选项: -a :包含全部的文件系统 -h :以 ...
-
openstack的最简单安装
环境:采用centos7.4,最低4g内存.大硬盘.内存小了会在安装过程中报错.整个过程大概2小时,看网速快慢,所有的节点和服务都安装在同一台机器上. yum update -y yum inst ...
-
笔记:Maven 下载和安装
Windows 安装 下载 Apache Maven,下载地址为 http://maven.apache.org/ 解压缩下载的 ZIP 文件,复制到安装目录 增加环境变量 M2_HOME ,值为 A ...
-
python自动化开发-[第六天]-常用模块、面向对象
今日概要: 1.常用模块 - os模块 - random模块 - shutil模块 - hashlib模块 - pickle/json模块 - shelve模块 - configparser模块 - ...
-
【Zookeeper】源码分析之网络通信(三)之NettyServerCnxn
一.前言 前面已经学习了NIOServerCnxn,接着继续学习NettyServerCnxn. 二.NettyServerCnxn源码分析 2.1 类的继承关系 public class Netty ...
-
查看sql执行的情况
今天同事让看一个sql,无意中学到一个查看sql执行情况的命令,以前都是傻傻的等的,今后不用了 SELECT percent_complete FROM sys.dm_exec_requests