1. 程式人生 > >jQuery-qrcode.js 生成帶Logo 的二維碼

jQuery-qrcode.js 生成帶Logo 的二維碼

引入檔案  jQuery-qrcode.js  

地址:https://blog-static.cnblogs.com/files/kitty-blog/jquery-qrcode.js

https://blog-static.cnblogs.com/files/kitty-blog/jquery-qrcode.min.js

1、在頁面上寫img 標籤 src 為 Logo 路徑, 如不需要顯示 則隱藏。。如 :

1 <img src="~/images/Logo.png" class="hidden" id="myLogo" />

2、頁面上 寫個 div 放 二維碼:

1  <div id="QRCode"></div>

3、建立 帶Logo 的二維碼 js d程式碼:

 1 //生成二維碼
 2     function createCode(QrUrl) {
 3         $("#QRCode").qrcode({
 4             render: "canvas", //也可以替換為table
 5             minVersion: 1,       // version range somewhere in 1 .. 40
 6             maxVersion: 40,
 7
ecLevel: 'H', //識別度 'L', 'M', 'Q' or 'H' 8 left: 0, 9 top: 0, 10 size: 100, //尺寸 11 fill: '#000', //二維碼顏色 12 background: null, //背景色 13 text: QrUrl, //二維碼內容 14 radius: 0.1, // 0.0 .. 0.5
15 quiet: 2, //邊距 16 mode: 4, 17 mSize: 0.2, //圖片大小 18 mPosX: 0.5, 19 mPosY: 0.5, 20 label: 'jQuery.qrcode', 21 fontname: 'sans', 22 fontcolor: '#000', 23 image: $('#myLogo')[0] 24 }); 25 },