本期介紹一個前端動態生成二維碼的插件 jquery.qrcode.js,jquery.qrcode.js 是一個能夠在客戶端生成矩陣二維碼 QRCode 的 jquery 插件 ,使用它可以很方便的在頁面上生成二維碼。
引入將 jquery.qrcode.min.js 和 jquery 直接引入
<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
創建 dom創建一個 DOM 元素去包含生成 qr 碼
<div id="qrcode"></div>
生成二維碼在此容器中的添加 qrcode
<script>
jQuery(function(){
jQuery('#qrcode').qrcode("https://www.baidu.com/");
})
</script>
進階用法指定二維碼的生成方式://使用table生成
jQuery('#qrcode').qrcode({
render: "table",
text: "https://www.baidu.com/"
});
//使用canvas生成
jQuery('#qrcode').qrcode({
render: "canvas",
text: "https://www.baidu.com/"
});
指定生成二維碼的大小:可以在調用函數的同時輸入想要生成二維碼的寬度和高度即可指定生成的二維碼的大小。
//生成100*100(寬度100,高度100)的二維碼
jQuery('#qrcode').qrcode({
render: "canvas", //也可以替換為table
width: 100,
height: 100,
text: "https://www.baidu.com/"
});
指定生成二維碼的色彩樣式:可以在調用函數的同時輸入想要生成二維碼的前景色和背景色即可指定生成的二維碼的色彩樣式。
//生成前景色為紅色背景色為白色的二維碼
jQuery('#qrcode').qrcode({
render: "canvas", //也可以替換為table
foreground: "#C00",
background: "#FFF",
text: "https://www.baidu.com/"
});
中文 ULR 生成方法:jQuery("#output").qrcode(encodeURI("http://中文中文"));//使用encodeURI進行轉碼「感謝閱讀,後面會不斷分享自己工作中用到的開源庫,大家一起交流學習」
有錢的捧個錢場,沒錢的捧個人場