JS二维码生成插件,一键生成二维码

jquery.qrcode是个依赖jquery的二维码生成插件,主要用于连接和文本的二维码生成,有两种生成格式canvas和table格式的,当然canvas不支持低版本浏览器,table有点小bug,但是没啥大问题。建议使用在移动端上。

这儿插件可以扩展开发,本来也是MIT协议的东西,后期我有可能会加点其他的功能,目前考虑的是加logo了,其他的再说。

这个js插件可以点击生成,列表生成都是可以的,写的方法跟JQ是一样的,不懂得可以留言。

【github地址:https://github.com/jeromeetienne/jquery-qrcode】代码可以去github下载,可以到文章的最下面使用百度网盘,我会提供的

这次我就简单的给大家介绍一下jquery-qrcode的使用方法。(www.gendan5.com)

<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<div class="qrcode1"></div>
<div class="qrcode2"></div>
<div class="qrcode3"></div>
<script type="text/javascript">
$(document).ready(function () {
//一、如果是英文字符
$('.qrcode1').qrcode({
render: "canvas", //两种模式1、table 2、canvas
correctLevel: 1,//识别度
quiet:20,
width: 200,//宽度
height: 200,//高度
foreground: "#333",//纹路色
background: "#eee",//背景色
text: "http://cenggel.com",//文字
});

    //二、链接带中文的时候需要使用encodeURI进行转码才可以
    $('.qrcode2').qrcode({
        render: "canvas", //两种模式1、table  2、canvas
        correctLevel: 1,//识别度
        width: 200,//宽度
        height: 200,//高度
        foreground: "#333",//纹路色
        background: "#eee",//背景色
        text: (encodeURI("http://cenggel.com/tag/chrome插件"))//文字
    });
    //三、文字中包含中文+英文字符的时候
    var str = "CGLweb前端 cenggel.com";
    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));
        }
    }
    //转换代码来自于网络,出处实在是不好说,如果知道出处请提供一下链接,谢谢
    $('.qrcode3').qrcode({
        render: "canvas", //两种模式1、table  2、canvas
        correctLevel: 3,//识别度
        width: 200,//宽度
        height: 200,//高度
        foreground: "#333",//纹路色
        background: "#eee",//背景色
        text:out   //文字
    });
});

</script>
<style type="text/css">
body{ width:1200px; margin:0 auto;}
div{ margin:100px; width:200px; float:left;}
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值