美文网首页
生成好看的二维码

生成好看的二维码

作者: 湛都南 | 来源:发表于2018-12-29 19:21 被阅读0次

    //生成二维码的js
    var str = toUtf8($('#url').val());

            $("#code").qrcode({

                render: "canvas",

                width: 200,

                height: 200,

                text: str,

                background: "#dddddd",

                foreground: "#333333"

            });

    //字符串转换UTF-8格式,生成二维码用

    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;

    }

    //html引入外部js

    <script src="js/qrcode/jquery.qrcode.js"></script>

    <script src="js/qrcode/jquery.min.js"></script>

    //样式表,可以自行定义

    <style>

    #code canvas{

        padding: 20px;

        border-radius: 20px;

        background: #dddddd;

        cursor: pointer; 

        transition: all 0.6s; 

    }

    #code canvas:hover{

        transform: scale(1.4); 

        box-shadow: 0px 0px 10px #888888;

    }

    </style>

    //html内容

    <p id="code" ></p>

    生成二维码js插件地址:https://github.com/jeromeetienne/jquery-qrcode

    相关文章

      网友评论

          本文标题:生成好看的二维码

          本文链接:https://www.haomeiwen.com/subject/znvplqtx.html