zoukankan      html  css  js  c++  java
  • jquery-qrcode生成二维码

    1. 引用方式:

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery-qrcode/1.0.0/jquery.qrcode.min.js"></script>

    2. 使用方式:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">
            <meta name="format-detection" content="telephone=no">
            <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
            <script src="http://apps.bdimg.com/libs/jquery-qrcode/1.0.0/jquery.qrcode.min.js"></script>
            <title></title>
        </head>
    
        <body>
            <div id="qrcode"></div>
            <script type="text/javascript">
                $('#qrcode').qrcode({
                    render: "canvas",     //默认配置,可以为空也可以替换为table
                     "250",        //设置宽度
                    height: "250",      //设置高度
                    foreground: "#C00",    //二维码颜色
                     background: "#FFF",    //背景色
                    text: 'https://www.cnblogs.com/xyyt', //二维码内容            
                });
            </script>
        </body>
    </html>

    3. 微信中识别二维码——转换为图片格式:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">
            <meta name="format-detection" content="telephone=no">
            <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
            <script src="http://apps.bdimg.com/libs/jquery-qrcode/1.0.0/jquery.qrcode.min.js"></script>
            <title></title>
        </head>
        <body>
            <div id="qrcode"></div>
            <img id="qrcodeImg"/>
            <script type="text/javascript">
                var qrcode = $('#qrcode').qrcode({
                    render: "canvas",     //默认配置,可以为空也可以替换为table
                     "250",        //设置宽度
                    height: "250",      //设置高度
                    foreground: "#C00",    //二维码颜色
                     background: "#FFF",    //背景色
                    text: 'https://www.cnblogs.com/xyyt', //二维码内容            
                }).hide();
                //将生成的二维码转换成图片格式
                var canvas = qrcode.find('canvas').get(0);
                $('#qrcodeImg').attr('src', canvas.toDataURL('image/jpg'));
            </script>
        </body>
    </html>

    4. 生成中文:

            <div id="chinese_qrcode"></div>
            <script>
                $(function() {
                    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;
                    }
                    jQuery("#chinese_qrcode").qrcode(utf16to8("中文中文")); //使用encodeURI进行转码
                })
            </script>
  • 相关阅读:
    二分查找
    转:归并排序
    C++ STL stack和queue
    spring-第十九篇AOP面向切面编程之增强处理的优先级
    spring-第十八篇之spring AOP基于XML配置文件的管理方式
    spring-第十七篇之spring AOP基于注解的零配置方式
    spring-第十一篇之SpEL表达式
    spring-第八篇之容器中的bean的生命周期
    spring-第七篇之深入理解容器中的bean
    spring-第二篇ApplicationContext国际化及事件机制
  • 原文地址:https://www.cnblogs.com/xyyt/p/9408991.html
Copyright © 2011-2022 走看看