动态生成二维码插件 jquery.qrcode.js

时间:2022-09-11 09:14:52

前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个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.js

如果想要改变它的大小、二维码颜色、背景色怎么办?不用着急,我们可以通过配置来得到我们想要的,接下来我们就看一看它的配置:

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.js的更多相关文章

  1. 生成二维码(jquery&period;qrcode&period;min&period;js插件)

    生成二维码:参看GitHub资源https://github.com/jeromeetienne/jquery-qrcode 直接上代码:(都需要引入jQuery.js  1.引入(jquery.qr ...

  2. Jquery&period;Qrcode在客户端动态生成二维码并添加自定义Logo

    0 Jquery.Qrcode简介 Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服 ...

  3. qrcode&period;js 动态生成二维码

    用qrcode.js动态生成二维码图片非常简单,只需要引入qrcode.js即可使用,而且可以自定义图片大小.背景色等信息. 1.jsp代码---页面头部引入qrcode.js,jquery文件可选 ...

  4. js生成二维码的jquery组件–qrcode

    js生成二维码的jquery组件–qrcode 2015/01/30 / 2508 VIEWS / JAVASCRIPT, JQUERY 有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. ...

  5. jquery动态生成二维码添加自定义logo

    动态生成二维码中间带logo. jquery.qrcode.js 动态生成二维码api很简单. 引入jquer(版本任意),引入jquery.qrcode.js 不需要中间带logo这样就可以了.带l ...

  6. js动态生成二维码

    一.使用jquery.qrcode生成二维码 1.首先在页面中加入jquery库文件和qrcode插件 <script type="text/javascript" src= ...

  7. 动态生成二维码并利用canvas合成出一张图片&lpar;类似海报、分享页&rpar;

    在前端开发并打算推广一个APP的时候,推广页是免不了的,而推广页的展示方式一般是给人家一个二维码,让别人自己去安装APP,这样前段任务也达到了,这次写这篇文章的原因主要还是总结一下,其中有很多不完善的 ...

  8. thinkphp5动态生成二维码实例总结

    thinkphp5关于动态生成二维码类库总结: 遇到的最大问题如下:我想大部分人也碰到过,所有觉得有必要总结下: thinkphp5提示找不到Qrcode类,可是自己明明都放置到了,vendor 目录 ...

  9. 转&colon; jquery&period;qrcode&period;js生成二维码插件&amp&semi;转成图片格式

    原文地址: https://blog.csdn.net/u011127019/article/details/51226104 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持can ...

随机推荐

  1. C&num;&period;NET序列化XML、JSON、二进制微软自带DLL与newtonsoft&lpar;json&period;net&rpar;

    序列化是将对象转换成另一种格式(XML.json.二进制byte[]) JSON序列化 .NET中有三种常用的JSON序列化的类,分别是: Newtonsoft.Json.JsonConvert类(推 ...

  2. 深入理解JAVA的多态性&lbrack;转&rsqb;

    昨天看到一个关于多态性的帖子,参考了回帖者的理解,加入了一些自己的看法,整理出来供大家参考,不一定完全正确,欢迎大家批评指正. (一)相关类 class A ...{         public S ...

  3. Python如何实现单步调试

    遇到大型python项目,如何定位问题和监控程序的运行状态是一个程序员必须掌握的技能,今天小编为你带来python程序的单步调试方法,方便易用,简单易记! 首先你需要在所调试程序的开头中:import ...

  4. poj&lowbar;2104&colon; K-th Number 【主席树】

    题目链接 学习了一下主席树,感觉具体算法思路不大好讲.. 大概是先建个空线段树,然后类似于递推,每一个都在前一个"历史版本"的基础上建立一个新的"历史版本",每 ...

  5. lesson - 6 课程笔记

    一.df  作用:  显示磁盘分区上的可使用的磁盘空间, 默认显示单位为kb . 可以利用该命令来获取硬盘被占用了多少空间,目前还剩下多少空间的等信息. 选项: -a :包含全部的文件系统 -h :以 ...

  6. openstack的最简单安装

    环境:采用centos7.4,最低4g内存.大硬盘.内存小了会在安装过程中报错.整个过程大概2小时,看网速快慢,所有的节点和服务都安装在同一台机器上.   yum update -y yum inst ...

  7. 笔记:Maven 下载和安装

    Windows 安装 下载 Apache Maven,下载地址为 http://maven.apache.org/ 解压缩下载的 ZIP 文件,复制到安装目录 增加环境变量 M2_HOME ,值为 A ...

  8. python自动化开发-&lbrack;第六天&rsqb;-常用模块、面向对象

    今日概要: 1.常用模块 - os模块 - random模块 - shutil模块 - hashlib模块 - pickle/json模块 - shelve模块 - configparser模块 - ...

  9. 【Zookeeper】源码分析之网络通信(三)之NettyServerCnxn

    一.前言 前面已经学习了NIOServerCnxn,接着继续学习NettyServerCnxn. 二.NettyServerCnxn源码分析 2.1 类的继承关系 public class Netty ...

  10. 查看sql执行的情况

    今天同事让看一个sql,无意中学到一个查看sql执行情况的命令,以前都是傻傻的等的,今后不用了 SELECT percent_complete FROM sys.dm_exec_requests