JavaScript QrCode

一、简介：

使用JavaScript插件生成二维码，源码地址：https://github.com/jeromeetienne/jquery-qrcode，在需要生成二维码的界面引入jquery.min.js和jquery.qrcode.min.js。

二、生成二维码

<script type='text/javascript'
    src="/jeesite/static/qrcode/jquery.min.js"></script>
<script type="text/javascript"
    src="/jeesite/static/qrcode/jquery.qrcode.min.js"></script>

<style type="text/css">
#qrcode {
    position: absolute;
    left: 40%;
    top: 40%;
}
</style>

    <img src=<%=UserUtils.getUser().getPhoto()%> id="logoImg" /> -> 可引入Jsp表达式

    <div id="qrcode">  
        <script type="text/javascript">
            function toUtf8(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;
            }

            $("#qrcode").qrcode({ -> 绘制二维码
                render : "canvas", //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
                text : toUtf8("哈哈"), //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
                width : "200", // //二维码的宽度
                height : "200", //二维码的高度
                typeNumber : -1,//计算模式
                correctLevel : 0,//二维码纠错级别
                background : "#ffffff", //二维码的后景色
                foreground : "#000000", //二维码的前景色
            });

            var image = new Image(); -> 创建一个<img>标签
            image.src = "<%=UserUtils.getUser().getPhoto()%>";
            image.width = "200px";
            image.height = "200px";
            var margin = $("#qrcode").width() / 2 - 25;
                        
            image.onload = function() { -> 图像加载完成触发，绘制二维码中心图像
                $("#qrcode canvas")[0].getContext('2d').drawImage(image, -> 画标签 $("#logoImg")[0]
                        margin, margin, 50, 50); -> margin是xy，50是宽高
            }
        </script>
    </div>