jq如何生成二維碼
代碼如下:
1.jquery.qrcode生成二維碼代碼
<!DOCTYPE html> <html> <head> <script charset='utf-8' type='text/javascript' src='js/jquery-1.11.0.js'></script> <script src="js/jquery.qrcode.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#qr_container').qrcode({ render: "canvas", height: 120, width: 120, correctLevel: 0, text: "https://www.cnblogs.com/dreambin/" }); }); /*注釋 render: 二維碼圖片的生成方式。支持table和canvas來渲染。
height: 二維碼高度。 width: 二維碼寬度。 correctlevel: 二維碼容錯級別。 text: 二維碼內容。*/ </script> </head> <body> <div id="qr_container" style="margin:auto; position:relative;"></div> </body> </html>
效果如下:
2.jquery-qrcode生成帶logo二維碼代碼
<div id="container"></div> <img id="qr-img" src="img/icon.png" hidden >
<script src="js/jquery-1.11.0.js"></script>
<script src="js/jquery-qrcode.js"></script>
<script type="text/javascript">
var $option = { render: 'canvas', // render method: 'canvas', 'image' or 'div' 渲染模式 三種,因為我需要生成圖片,以便用戶下載,選的'image' minVersion: 1, // version range somewhere in 1 .. 40 maxVersion: 40, ecLevel: 'L', // error correction level: 'L', 'M', 'Q' or 'H' 識別度 H最高 size: 200, // size in pixel 畫布大小 left: 0, // offset in pixel if drawn onto existing canvas top: 0, fill: '#000', // code color or image element background: '#fff', // background color or image element, null for transparent background text: 'https://www.cnblogs.com/dreambin/', // content radius: 0, // corner radius relative to module width: 0.0 .. 0.5 quiet: 2, // quiet zone in modules 白邊的塊數 mode: 4, // modes / 0: normal / 1: label strip / 2: label box / 3: image strip / 4: image box // 5種模式: 0是普通 / 1是標語占中間一行 / 2標語占中間一塊 / 3圖片站中間一行 / 4圖片占中間一塊 較常用的是4 mSize: 0.1, mPosX: 0.5, mPosY: 0.5, label: 'https://www.cnblogs.com/dreambin/', fontname: 'sans', fontcolor: '#000', image: $("#qr-img")[0] //選擇放在中間的圖片,原先我寫的路徑 無效,后來用這種方法可以拿到 } $('#container').qrcode($option); </script>
效果如下:
注,具體圖片大小樣式可以進行調參數值改變,避免二維碼不能掃描,建議圖片不要超過二維碼三分之一
react框架又是如何生成二維碼?代碼如下:
1.qrcode.react生成二維碼步驟
先安裝qrcode.react組件
npm install qrcode.react
用法:
import React from 'react'; import QRCode from 'qrcode-react'; React.render( <QRCode value="https://www.cnblogs.com/dreambin/" />, );
參數:
prop | type | default value |
value | string | |
renderAs | string ('canvas' 'svg' ) |
'canvas' |
size | number | 128 |
bgColor | string(CSS color) | "#FFFFFF" |
fgColor | string(CSS color) | "#000000" |
level | string ('L' 'M' 'Q' 'H' ) |
'L' |
效果如下:
2.qrcode-react生成帶logo二維碼步驟
先安裝qrcode.react組件
npm install qrcode-react
用法:
import React from 'react'; import QRCode from 'qrcode-react'; React.render( <QRCode value="https://www.cnblogs.com/dreambin/" logo="logo.png" />, );
參數:
prop | type | default value |
value | string | |
size | number | 128 |
bgColor | string(CSS color) | "#FFFFFF" |
fgColor | string(CSS color) | "#000000" |
logo | string (URL / PATH) |
|
logoWidth | number | size * 0.2 |
logoHeight | number |
效果如下:
釋:上圖為調整了尺寸是放大版二維碼
注:圖片與二維碼放太大容易失真,避免二維碼無法掃描,不要將二維放大,同理,logo一樣不可以方太大。