1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="jquery-3.3.1.min.js"></script> 5 <script src="jquery-qrcode.js"></script> 6 <!-- 7 //樣例地址 8 https://larsjung.de/jquery-qrcode/latest/demo/ 9 //jquery-qrcode.js下載地址 10 https://github.com/lrsjng/jquery-qrcode 11 --> 12 <style type="text/css"> 13 #img-buffer { 14 display: none; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="qrcode"></div> 20 <img src="img/1.jpg" id="img-buffer"> 21 <script type="text/javascript"> 22 $('#qrcode').qrcode({ 23 render: 'canvas', //設置渲染方式，有table和canvas，使用canvas方式渲染性能相對來說比較好 24 minVersion: 1, // version range somewhere in 1 .. 40 25 maxVersion: 40, 26 ecLevel: 'L', //識別度 'L', 'M', 'Q' or 'H' 27 left: 0, 28 top: 0, 29 size: 200, //尺寸 30 fill: '#000', //二維碼顏色 31 background: null, //背景色 32 text: 'no text', //二維碼內容 33 radius: 0.1, // 0.0 .. 0.5 34 quiet: 2, //邊距 35 36 // modes 37 // 0: normal 38 // 1: label strip 39 // 2: label box 40 // 3: image strip 41 // 4: image box 42 mode: 4, 43 mSize: 0.3, //圖片大小 44 mPosX: 0.5, 45 mPosY: 0.5, 46 47 label: 'jQuery.qrcode', 48 fontname: 'sans', 49 fontcolor: '#000', 50 image: $("#img-buffer")[0] 51 }); 52 </script> 53 </body> 54 </html>