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; 
            }
  • 相关阅读:
    如何处理前端异常监控?
    【效果】使用canvas rotate实现一个旋转的矩形
    小tips:微信小程序登录后返回登录前的页面继续操作(保留参数)
    nginx的常用配置
    vue-router的History 模式常用的三种配置方式(去掉地址栏中的#号)
    web前端常用的五种方式搭建本地静态html页面服务器
    小tips:nodejs请求接口超时使用中间件connect-timeout实现自动超时机制
    小tips:tomcat下JSP页面引用css、js等资源路径404问题
    原生JavaScript实现一个简单的Promise构造函数示例
    canvas图片旋转扩展出原生JS实现移动端横竖屏手写签名示例
  • 原文地址:https://www.cnblogs.com/fqh123/p/11116934.html
Copyright © 2011-2022 走看看