狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

【JavaScript】純JS前端生成二維碼的幾種方式

admin
2023年5月30日 9:32 本文熱度 825

qrcode.js & jquery.qrcode.js

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

本地使用script標簽引入:

HTML結構

<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鏈接信息轉換并生成為二維碼形式") {

    $('#qrcodeimg').html("");

    $('#qrcodeimg').qrcode({

        render: !!document.createElement('canvas').getContext ? 'canvas' : 'table',

        width: 200, height: 200, text: text

    });

}

$(function(){

    // 初始化生成二維碼

    creatqrcode("aaaaaaaa")

})

優缺點

優點:簡單易用,體積小,兩個文件壓縮后僅10kb

缺點:不支持中文及中文符號,僅支持英文、數字、英文符號,使用中文,會生成二維碼,但是二維碼掃描后會有亂碼

示例

生成的節點

 

中文二維碼

 

 英文二維碼

 

QRcode

github地址:QRcode

可在線本地安裝,附件:qrcode_js.rar

HTML結構

<div id="qrcodeimg" ></div>

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

script文件

var creatqrcode = function (text="二維碼生成器,可將文字、分享鏈接、電話等純文本或wifi鏈接信息轉換并生成為二維碼形式") {

    $("#qrcodeimg").html("");

    new QRCode('qrcodeimg', {

        text: text,

        width: 200,

        height: 200,

        colorDark: '#000000',

        colorLight: '#ffffff',

        correctLevel: QRCode.CorrectLevel.H //糾錯等級

    });

}

$(function(){

    // 初始化生成二維碼

    creatqrcode("我是整頓俠,我要整頓職場不良風氣!")

})

優缺點

優點:簡單易用,通用性強

缺點:(僅指我當前使用版本)當中英文混合輸入時,長度判斷混淆,容易內容超出最大長度,導致空白

示例

生成的節點

 

二維碼


 

arale-qrcode

github地址:arale-qrcode

可在線可本地可安裝

HTML結構

<div id="qrcodeimg" ></div>

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

script文件

var creatqrcode = function (text="二維碼生成器,可將文字、分享鏈接、電話等純文本或wifi鏈接信息轉換并生成為二維碼形式", 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("我是整頓俠,我要整頓職場不良風氣!")

})

優缺點

優點:簡單易用,通用性強,功能強大

缺點:生成的為svg圖片,當中心有logo時,使用html2canvas下載的文件,中心圖片缺失

示例

生成的節點

 

壞圖二維碼


正常二維碼



Awesome-qr

github地址:Awesome-qr

可在線本地安裝,附件:awesome-qr.rar

HTML結構

<!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) {

    // 二維碼生成參數

    //var text = text || '二維碼生成器,可將文字、分享鏈接、電話等純文本或wifi鏈接信息轉換并生成為二維碼形式'

    //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, // 內容

        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", "我是整頓俠,我要整頓職場不良風氣!", 150, "", "#FFFFFF");

creatqrcode("qrcodeimg2", "http://www.clicksun.cn", 100, "", "#FFFFFF");

</script>

</body>

</html>

優缺點

優點:簡單易用,通用性強,功能強大,可配置項多,不生成標簽,僅生成dataurl,方便使用和下載

缺點:暫未發現

示例

生成的節點

 

二維碼



文中所提到的庫的本地文件版

qrcode.js & jquery.qrcode.js :基于jquery的qrcode.zip-Javascript文檔類資源-CSDN下載

QRcode:qrcode.min.js-Javascript文檔類資源-CSDN下載

arale-qrcode:arale-qrcode.js-Javascript文檔類資源-CSDN下載

awesome-qr:awesome-qr.js-Javascript文檔類資源-CSDN下載


該文章在 2023/6/14 16:34:55 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved