jquery.qrcode.js生成矩陣二維碼QRCode - js筆記

如果你的網(wǎng)頁使用了jquery的話，可以參考下這個教程，教你如何使用jquery.qrcode.js生成矩陣二維碼QRCode。然而，本教程還未進(jìn)行驗(yàn)證。

• 代碼來源：詳情

將jquery.qrcode.min.js和jquery添加到您的網(wǎng)頁中

<script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

然后創(chuàng)建一個DOM元素去包含生成qr碼。

<div id="qrcode"></div>

然后你在此容器中的添加qrcode

<script>
    jQuery(function(){
    jQuery('#qrcode').qrcode("http://www.kartiktrivedi.com");
})
</script>

就這么簡單，您想要的二維碼就生成了。

更多：

指定二維碼的生成方式：

可以在調(diào)用函數(shù)的同時(shí)輸入想要的二維碼生成方式（table/canvas）。

//使用table生成
jQuery('#qrcode').qrcode({
    render: "table",
    text: "http://www.kartiktrivedi.com"
});
 
//使用canvas生成
jQuery('#qrcode').qrcode({
    render: "canvas",
    text: "http://www.kartiktrivedi.com"
});

指定生成二維碼的大?。?/strong>

可以在調(diào)用函數(shù)的同時(shí)輸入想要生成二維碼的寬度和高度即可指定生成的二維碼的大小。

//生成100*100(寬度100，高度100)的二維碼
jQuery('#qrcode').qrcode({
    render: "canvas", //也可以替換為table
    width: 100,
    height: 100,
    text: "http://www.kartiktrivedi.com"
});

指定生成二維碼的色彩樣式：

可以在調(diào)用函數(shù)的同時(shí)輸入想要生成二維碼的前景色和背景色即可指定生成的二維碼的色彩樣式。

//生成前景色為紅色背景色為白色的二維碼
jQuery('#qrcode').qrcode({
    render: "canvas", //也可以替換為table
    foreground: "#C00",
    background: "#FFF",
    text: "http://www.kartiktrivedi.com"
});

中文ULR生成方法:

jQuery("#output").qrcode(encodeURI("http://中文中文"));//使用encodeURI進(jìn)行轉(zhuǎn)碼

展示當(dāng)前頁二維碼

當(dāng)前頁地址：

當(dāng)前頁二維碼：

如果您不需要使用插件的話，可以看看這個原生方法：

QRCode.js - 用于JavaScript的跨瀏覽器QRCode生成器

Muze

• 20年4月23日
• 喜歡：0
• 瀏覽：377

相關(guān)接口

• 品味二維碼

使用方法

https://api.pwmqr.com/qrcode/create/?url=二維碼信息

例子：

<img src="https://api.pwmqr.com/qrcode/create/?url=http://www.kartiktrivedi.com/15513.html"/>

效果：

下載權(quán)限

查看

• ￥
  免費(fèi)下載
  評論并刷新后下載
  登錄后下載

查看演示

• {{attr.name}}：

您當(dāng)前的等級為

登錄后免費(fèi)下載登錄 小黑屋反思中，不準(zhǔn)下載！ 評論后刷新頁面下載評論 支付以后下載 請先登錄 您今天的下載次數(shù)（次）用完了，請明天再來 支付積分以后下載立即支付 支付以后下載立即支付 您當(dāng)前的用戶組不允許下載升級會員

您已獲得下載權(quán)限 您可以每天下載資源次，今日剩余次