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,
120,
correctLevel: 0,
text: "https://www.cnblogs.com/dreambin/"
});
});
/*注释
render: 二维码图片的生成方式。支持table和canvas来渲染。
height: 二维码高度。
二维码宽度。
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 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一样不可以方太大。