react 根据url动态生成带logo的二维码并下载

react 根据url动态生成带logo的二维码并下载

需要根据后端返回的url来动态的生成带logo的二维码并下载
可以使用qrcode.react
1.先安装依赖 npm install qrcode.react
2.在文件里面引入 import QRCode from 'qrcode.react';
3.在代码里

注意：不要使用如下方式，我刚开始百度搜的是下面这种方式，然后logo就一直显示不出来

4.点击下载，下载的情况分为两种，一种是logo的图片不涉及跨域（即是在本地）

（1）logo图片未涉及到跨域

<a id="down_link" onClick={downLoadCode}>
    点击下载
</a>

 const downLoadCode = () => {
    const img = new Image();
    const canvasImg = document.getElementById('qrCode'); // 获取canvas类型的二维码
    const downLink = document.getElementById('down_link');
    img.src = canvasImg && canvasImg.toDataURL('image/png'); // 将canvas对象转换为图片的data url
    downLink.href = img.src;
    downLink.download = '二维码'; // 图片name
  };

（2）logo图片跨域

const renderCode = () => {
    const url = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201312%2F03%2F165526ophx4l6c6ll3cnpl.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629959510&t=c215260d94be9eca57b282b5ad46da25'//百度随便找的图片
    const getBase64 = (img) => {
      const getBase64Image=(img, width?, height?)=> {
        const canvas = document.createElement("canvas");
        canvas.width = width ? width : img.width;
        canvas.height = height ? height : img.height;
        const ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        const dataURL = canvas.toDataURL();
        return dataURL;
      }
      const image = new Image();
      image.setAttribute('crossOrigin', 'anonymous')//解决跨域
      image.crossOrigin = '';
      image.src = img;
      return new Promise((resolve, reject) => {
        image.onload = function () {
          resolve(getBase64Image(image));//将base64传给done上传处理
        }
      });
    };
    getBase64(url).then(base64 => {
      setCodeLogo(base64)
    });


    return (
      <div >
        <QRCode
          id="qrCode"
          value=''//此处是二维码url
          size={200} // 二维码的大小
          fgColor="#000000" // 二维码的颜色
          style={{ margin: 'auto' }}
          imageSettings={{ // 二维码中间的logo图片
            src: codeLogo,//初始值为string，然后把处理好的url赋值给它
            height: 50,
            width: 50,
            excavate: true, // 中间图片所在的位置是否镂空
          }}
        />
        <div>
          <button onClick={downLoadCode}>点击下载</button>
        </div>
      </div>
    );

我的logo图片路径由于是用cdn存的，跟oss图片要求不符合，最后还是把中间的logo去掉了，改成下面加一行文字，要求点击下载的时候把二维码和文字下载下来
下载二维码和文字
1.安装依赖

 npm install dom-to-image --save
 npm install file-saver --save

2.在项目里面引入

import domtoimage from 'dom-to-image';
import { saveAs } from 'file-saver';

 const getBlobPng = () => {
      const node = document.getElementById("code");
      domtoimage.toBlob(node).then((blob) => {
        // 调用file-save方法 直接保存图片
        saveAs(blob, `${sellerName}导购说动态二维码`)
      })
    }

 const renderCode = () => {
   return (
      <div>
        <div id="code">
          <QRCode
            id="qrCode"
            value={codeUrl}
            size={200} // 二维码的大小
            fgColor="#000000" // 二维码的颜色
            style={{ margin: 'auto' }}
          />
          <p>{sellerName}</p>
        </div>
        <div>
          <button onClick={getBlobPng}>点击下载</button>
        </div>
      </div>
    );
  };