qrcode.js & jquery.qrcode.js

沒有找到該庫的原始出處，有知道的朋友歡迎指出。

本地使用script標(biāo)簽引入：

HTML結(jié)構(gòu)

<div id="qrcodeimg" ></div>
<script src="/qcode/qrcode.js" type="text/javascript"></script>
<script src="/qcode/jquery.qrcode.js" type="text/javascript"></script>

script文件

var creatqrcode = function (text="二維碼生成器，可將文字、分享鏈接、電話等純文本或wifi鏈接信息轉(zhuǎn)換并生成為二維碼形式") {
    $('#qrcodeimg').html("");
    $('#qrcodeimg').qrcode({
        render: !!document.createElement('canvas').getContext ? 'canvas' : 'table',
        width: 200, height: 200, text: text
    });
}
$(function(){
    // 初始化生成二維碼
    creatqrcode("aaaaaaaa")
})

優(yōu)缺點

優(yōu)點：簡單易用，體積小，兩個文件壓縮后僅10kb

缺點：不支持中文及中文符號，僅支持英文、數(shù)字、英文符號，使用中文，會生成二維碼，但是二維碼掃描后會有亂碼

示例

生成的節(jié)點

中文二維碼

英文二維碼

QRcode

github地址：QRcode

可在線本地安裝，附件：qrcode_js.rar

HTML結(jié)構(gòu)

<div id="qrcodeimg" ></div>
<script src="/qrcode.min.js" type="text/javascript"></script>

script文件

var creatqrcode = function (text="二維碼生成器，可將文字、分享鏈接、電話等純文本或wifi鏈接信息轉(zhuǎn)換并生成為二維碼形式") {
    $("#qrcodeimg").html("");
    new QRCode('qrcodeimg', {
        text: text,
        width: 200,
        height: 200,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H //糾錯等級
    });
}
$(function(){
    // 初始化生成二維碼
    creatqrcode("我是整頓俠，我要整頓職場不良風(fēng)氣！")
})

優(yōu)缺點

優(yōu)點：簡單易用，通用性強

缺點：（僅指我當(dāng)前使用版本）當(dāng)中英文混合輸入時，長度判斷混淆，容易內(nèi)容超出最大長度，導(dǎo)致空白

示例

生成的節(jié)點

二維碼

arale-qrcode

github地址：arale-qrcode

可在線可本地可安裝

HTML結(jié)構(gòu)

<div id="qrcodeimg" ></div>
<script src='arale-qrcode.js' type="text/javascript"></script>

script文件

var creatqrcode = function (text="二維碼生成器，可將文字、分享鏈接、電話等純文本或wifi鏈接信息轉(zhuǎn)換并生成為二維碼形式", logo="") {
    // 生成二維碼
    var codeFigure = new AraleQRCode({
        "render": "svg",  // 生成的類型 'svg' or 'table'
        "text": text, // 需要生成二維碼的鏈接
        "size": 200,// 生成二維碼大小
        "foreground": "#000000", // 二維碼顏色
        "image": logo, // 二維碼中間logo
        "imageSize": 50, // 二維碼中間logo大小
    });
    var share_tools = document.queryselector('#qrcodeimg');
    // 先清空之前的二維碼，在填充新的二維碼
    $(share_tools).empty();
    share_tools.appendChild(codeFigure);
}
$(function(){
    // 初始化生成二維碼
    creatqrcode("我是整頓俠，我要整頓職場不良風(fēng)氣！")
})

優(yōu)缺點

優(yōu)點：簡單易用，通用性強，功能強大

缺點：生成的為svg圖片，當(dāng)中心有l(wèi)ogo時，使用html2canvas下載的文件，中心圖片缺失

示例

生成的節(jié)點

壞圖二維碼

正常二維碼

Awesome-qr

github地址：Awesome-qr

可在線本地安裝，附件：awesome-qr.rar

HTML結(jié)構(gòu)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src='awesome-qr.js' type="text/javascript"></script>
<script src='jquery.min.js' type="text/javascript"></script>
</head>
<body>
<img id="qrcodeimg1" ></img>
<img id="qrcodeimg2" ></img>
<script type="text/javascript">
function creatqrcode(imgID, imgText, imgSize, logo, background) {
    // 二維碼生成參數(shù)
    //var text = text || '二維碼生成器，可將文字、分享鏈接、電話等純文本或wifi鏈接信息轉(zhuǎn)換并生成為二維碼形式'
    //var size = 200;
    var colorDark = "#000000";
    var margin = 9;
    var background = background || "#ffffff";
    var logo = logo || "";
    $("#"+imgID).css({width:imgSize+"px",height:imgSize+"px"})
    new AwesomeQR.AwesomeQR({
        text: imgText, // 內(nèi)容
        size: imgSize, // 二維碼大小
        margin: margin, // 二維碼白邊大小
        colorDark:colorDark, // 二維碼顏色
        colorLight: "rgba(159,255,255,0)", // 二維碼背景顏色
        logoImage : logo, // 二維碼中間logo
        logoScale : 0.3, // 二維碼中間logo大小
        logoCornerRadius : 0, // 二維碼中間logo圓角
    }).draw()
    .then((dataURL) => {
        $("#"+imgID).attr("src", dataURL)
    })
    .catch((err) => {
        console.error(err);
    });
}

// 初始化生成二維碼
creatqrcode("qrcodeimg1", "我是整頓俠，我要整頓職場不良風(fēng)氣！", 150, "", "#FFFFFF");
creatqrcode("qrcodeimg2", "http://www.hy56.cc", 100, "", "#FFFFFF");
</script>
</body>
</html>