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

    qrcode 生成二维码
    Demo:

    qrcodeGithub 地址:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>qrcode生成二维码</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="../plugins/bootstrap-4.1.3-dist/css/bootstrap.min.css">
        <script src="../plugins/echarts/jquery.min.js"></script>
        <script src="../plugins/bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
    </head>
    
    <body>
        <div class="alert alert-primary" role="alert" style="text-align: center;margin:10px;">
            <b>生成的二维码如下:</b>
        </div>
        <div id="qrCodeDiv" style="text-align: center; margin:40px;">
            <img id="qrCodeIco" src="logo.png" style="position: absolute; 64px; height: 64px;" />
        </div>
    </body>
    <script type="text/javascript">
    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;
    };
    $("#qrCodeDiv").qrcode({
        render: "canvas", //渲染方式有table方式(IE兼容)和canvas方式
         260, //宽度
        height: 260, //高度
        text: utf16to8("https://www.cnblogs.com/hglibin/"), //内容
        typeNumber: -1, //计算模式
        correctLevel: 2, //二维码纠错级别
        background: "#ffffff", //背景颜色
        foreground: "#000000" //二维码颜色
    });
    var margin = ($("#qrCodeDiv").height() - $("#qrCodeIco").height()) / 2; //控制Logo图标的位置
    $("#qrCodeIco").css("margin", margin);
    </script>
    
    </html>
    

    运行结果:

  • 相关阅读:
    CloudStack 4.2 与CloudStack 4.1二级存储API发生变化
    添加虚拟机磁盘扩容步骤
    NAT概述
    CloudStack全局参数
    在 Web 项目中应用 Apache Shiro
    使用 Spring Security 保护 Web 应用的安全
    获取浏览器的homepage
    剑指offer系列——2.替换空格
    剑指offer系列——1.二维数组中的查找
    JDK下载需要Oracle账号登录问题
  • 原文地址:https://www.cnblogs.com/hgnulb/p/9983031.html
Copyright © 2011-2022 走看看