jQuery和react实现二维码

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一样不可以方太大。