react 生成中间镶嵌名字的小程序二维码并下载

1.需要安装两个插件

import QRCode from 'qrcode.react';
import domtoimage from 'dom-to-image';

2.生成文字图片
dom代码

	const [textImg, setTextImg] = useState('')   // 文字图片链接

    // 调用字体转图片
    useEffect(()=>{
        getImg()
    },[visible])

    const getImg = () => {
        const node = document.getElementById("node");
        domtoimage.toPng(node).then((url) => {
            setTextImg(url)
        }).catch(() => {
            console.log("error")
        })
    }
	//dom
	<div className="node-content">
	   <div id="node" style={{ 'width': '42px' }}>
	        <span className="node-title">{name?.substring(0,3)}</span>
	    </div>
	</div>

3.生成二维码

 <QRCode
   id="qrCode"
      value={'https://www.baidu.com'}
      size={138} // 二维码的大小
      fgColor="#000000" // 二维码的颜色
      style={{ margin: 'auto' }}
      imageSettings={{ // 二维码中间的图片
          src: textImg,
          height: 15,
          width: 30,
          excavate: true, // 中间图片所在的位置是否镂空
      }}
  />

4.下载

const codeDown = (() => {
     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
  })
  <a id="down_link" onClick={codeDown}>下载二维码</a>