1. 程式人生 > >jquery二維碼生成插件jquery.qrcode.js

jquery二維碼生成插件jquery.qrcode.js

qrc cti 條碼 客戶端 code www bsp 想要 如何使用

插件描述:jquery.qrcode.js 是一個能夠在客戶端生成矩陣二維碼QRCode 的jquery插件 ,使用它可以很方便的在頁面上生成二維條碼。

轉載於:http://www.jq22.com/jquery-info294

如何使用它

將jquery.qrcode.min.js和jquery添加到您的網頁中

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

然後創建一個DOM元素去包含生成qr碼。

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

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

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

就這麽簡單,您想要的二維碼就生成了。

進階用法

指定二維碼的生成方式:

可以在調用函數的同時輸入想要的二維碼生成方式(table/canvas)。

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

指定生成二維碼的大小:

可以在調用函數的同時輸入想要生成二維碼的寬度和高度即可指定生成的二維碼的大小。

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

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

可以在調用函數的同時輸入想要生成二維碼的前景色和背景色即可指定生成的二維碼的色彩樣式。

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

中文ULR生成方法:

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

jquery二維碼生成插件jquery.qrcode.js