前端生成二维码---jQuery、react

  • Z时代
  • 2024-01-10
  • 分类：综合

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 ></div>
	</body>
</html>

效果如下：

2.jquery-qrcode生成带logo二维码代码

<div ></div>
<img >

	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/" />,
);

　　参数：

proptypedefault value
valuestring 
renderAsstring ('canvas' 'svg')'canvas'
sizenumber128
bgColorstring(CSS color)"#FFFFFF"
fgColorstring(CSS color)"#000000"
levelstring ('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"
   />,
);

　　参数：

proptypedefault value
valuestring 
sizenumber128
bgColorstring(CSS color)"#FFFFFF"
fgColorstring(CSS color)"#000000"
logo

string (URL / PATH)

 
logoWidthnumbersize * 0.2
logoHeightnumber 

 

 

　　效果如下：

　　释：上图为调整了尺寸是放大版二维码

注：图片与二维码放太大容易失真，避免二维码无法扫描，不要将二维放大，同理，logo一样不可以放太大。

3. qrcode-react生成二维码后实现点击下载功能

代码如下：

const okUploadProps = () => {

      const canvasImg = document.getElementById('qrCode'); // 获取canvas类型的二维码

      const img = new Image();

      img.src = canvasImg.toDataURL('image/png'); // 将canvas对象转换为图片的data url

      const downLink = document.getElementById('down_link');

      downLink.href = img.src;

      downLink.download = `二维码图片名称`; // 图片name

    };


    return (

      <Modal

        destroyOnClose

        width="5.6rem"

        mask={false}

        maskClosable={true}

        title={`标题提示`}

        visible={qrcodeVisible}

        wrapClassName='qrcodeModalStyle'

        cancelText=' '

        okText=' '

      >

        <Spin spinning={qrcodeLoading}>

          <div className='qrcodeContentview'>

            <a

              download

              

              onClick={okUploadProps}

            >

              <QRCode

                

                renderAs='canvas'

                value={qrcodeData.uploadUrl}

                size={128}

              />

              <div>点击下载二维码</div>

            </a>

          </div>

        </Spin>

      </Modal>

    );

以上是 前端生成二维码---jQuery、react 的全部内容， 来源链接： utcz.com/z/381498.html

回到顶部