生成好看的二维码

2018-12-29  本文已影响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

上一篇下一篇

猜你喜欢

热点阅读