jQuery和react實現二維碼
阿新 • • 發佈：2018-12-06
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一樣不可以方太大。