生成二維碼之 JavaScript (jquery-qrcode) 篇

本文講述如何使用 jquery-qrcode 生成二維碼

<!-- 引入 jQuery 與 jquery.qrcode-->
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<!-- 創(chuàng)建二維碼父級元素 -->
<div id="qrcode"></div>
<div id="qrcode2"></div>
<script type="text/javascript">
    // 選中要生成二維碼的元素節(jié)點, 調(diào)用 qrcode 方法, 傳入數(shù)據(jù)即可
    $("#qrcode").qrcode("https://google.com");
    //qrcode        同時提供更多參數(shù), 具體如下
    //render        繪制方式 canvas(繪制成一張圖片) table(繪制成一個表格) 默認(rèn) canvas
    //width         二維碼寬度  默認(rèn) 256
    //height        二維碼高度  默認(rèn) 256
    //correctLevel  容錯等級    1(L),0(M),3(Q),2(H)    1 最低, 2 最高  默認(rèn)為 2
    //background    背景顏色    默認(rèn)白色    #ffffff
    //foreground    前景顏色    默認(rèn)黑色    #000000
    // 使用示例
    $("#qrcode2").qrcode({
        text: "https://google.com",
        render: "table",
        width: 300,
        height: 300,
        correctLevel: 3,
        background: "#eceadb",
        foreground: "#444"
    })
</script>

由于 qrcode 的編碼原因會導(dǎo)致中文亂碼
如果能確保二維碼中的內(nèi)容為 ** 鏈接 **, 那么在使用前對內(nèi)容進(jìn)行 encodeURI 編碼即可

$("#qrcode").qrcode(encodeURI("https://google.com"));

如果不是鏈接, 需要對二維碼內(nèi)容進(jìn)行編碼, 方法來源于 http://justcoding.iteye.com/blog/2213034

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(toUtf8("https://google.com"));

Java 生成二維碼可參考 生成二維碼之 Java(Google zxing) 篇

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 參考資料JAVA 生成二維碼筆記, 谷歌 Zxing 二維碼,用數(shù)據(jù)流輸出到頁面顯示 項目環(huán)境jdk1.8(**z...
    jnil閱讀 13,463評論 1 5
  • 摘要 最近,公司業(yè)務(wù)上有個生成二維碼圖片的需求(Android端),之后筆者在網(wǎng)上查閱了一些資料,實現(xiàn)了這個功能。...
    夢想編織者灬小楠閱讀 46,297評論 37 132
  • 通過 生成二維碼之 Java (Google zxing) 篇 我們可以實現(xiàn)簡單二維碼的生成, 但是二維碼顯示卻過...
    jnil閱讀 3,688評論 1 5
  • 另一個實習(xí)生H所遇到的情況比K好得多。她是在一家公司做文員,因為公司業(yè)務(wù)發(fā)展范圍比較廣,專業(yè)性強(qiáng)。 有些專業(yè)詞匯H...
    jenny簡愛閱讀 713評論 1 1
  • “好可憐??!”“沒有?。∥矣X得沒什么”這是我在聽完同學(xué)對她童年說話的描述后發(fā)出的感慨,父親一心只顧股票,不管妻子女...
    懿蚴閱讀 294評論 0 0

友情鏈接更多精彩內(nèi)容