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
                width: "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
                width: "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>
复制代码

 

posted on   逍遥云天  阅读(291)  评论(0编辑  收藏  举报

编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示