zoukankan      html  css  js  c++  java
  • jquery.qrcode.js生成二维码(前端生成二维码)

    官网地址:http://jeromeetienne.github.io/jquery-qrcode/

    第一步引入插件:

    <script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script> 
    <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

    第二步 写一个dom

    <div id="qrcode"></div>

    第三步 生成

    $('#qrcode').qrcode("string");

    ok,生成

    上面是一个简单的生成二维码操作,下面进一步了解

    参数说明

    text        : "https://github.com/jeromeetienne/jquery-qrcode"  //设置二维码内容    
    render      : "canvas",//设置渲染方式 (有两种方式 table和canvas,默认是canvas)   
    width       : 256,     //设置宽度    
    height      : 256,     //设置高度    
    typeNumber  : -1,      //计算模式    
    correctLevel: 0,//纠错等级    
    background  : "#ffffff",//背景颜色    
    foreground  : "#000000" //前景颜色  

    生成一个:

                $('#qrcode').qrcode({
                    render:"canvas",//设置渲染方式 (有两种方式 table和canvas,默认是canvas)  
                     200,//宽度
                    height: 200,//高度
                    correctLevel:0,//纠错等级  
                    text: "https://i.cnblogs.com/EditPosts.aspx?postid=11116934",//生成二维码的文本
                    background:"#00FF00",//背景色
                    foreground:"#FFFF00",//前景色
                });

     遇见问题:

    1、发现带上背景色,前景色,生成的二维码不好扫描,于是干脆不带,就生成黑白的就挺好

    2、中文乱码问题:

    query-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的,这个方法默认会获取它的 Unicode 编码,一般的解码器都是采用UTF-8, ISO-8859-1等方式。

     英文是没有问题,如果是中文,一般情况下Unicode是UTF-16实现,长度2位,而UTF-8编码是3位,这样二维码的编解码就不匹配了。
     解决方式当然是,在二维码编码前把字符串转换成UTF-8,具体代码如下:

            generateQrcode(){
                var self=this;
                $('#qrcode').qrcode({
                    render:"canvas",//设置渲染方式 (有两种方式 table和canvas,默认是canvas)  
                     200,//宽度
                    height: 200,//高度
                    correctLevel:0,//纠错等级 纠错级别,可取0、1、2、3,数字越大说明所需纠错级别越大  
                    text: self.utf16to8("中文"),//生成二维码的文本
                });
            },
            utf16to8(str) { //二维码编码前把字符串转换成UTF-8
                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; 
            }
  • 相关阅读:
    新浪开放平台入门及基本步骤(java SDK)
    Android 解析JSON数据示例代码[CODE]
    Ubuntu10.04 搭建android平台
    程序员真的很懒
    android之ContentResolver与ContentProvider
    写代码如写散文
    通过OAuth认证和操作新浪微博
    喜报:凌阳教育深圳中心正式成立
    25个让Java程序员更高效的Eclipse插件
    Java Json开源解析包 googlegson download(下载)
  • 原文地址:https://www.cnblogs.com/fqh123/p/11116934.html
Copyright © 2011-2022 走看看