使用html2canvas下载海报，里面的图片却下载不了兼容谷歌浏览器做下载

前言：对于海报的下载，大家可能都不太陌生，手机上下载一张海报图片清爽而又便捷，

废话不多说，上代码👇

//下载依赖
yarn add html2canvas

下载好了依赖的插件后，到咱们开始写代码的时候，

<div id="html2canvas">
    <Row>
       <Col span={24} style={{ textAlign: 'center' }}>
            <Title level={5}>运营平台</Title>
       </Col>
    </Row>
    <img src={currentQrCodeUrl} className={styles.img} />
</div>

这个插件使用时候的时候，按照你这个包裹的id给你渲染成canvas画布来进行下载

import {Button} from 'antd';
      const canvasImg = () => {
        let canvasEle = document.getElementById('html2canvas'); //获取元素
        html2canvas(canvasEle, {
            scale: 2, //缩放
            useCORS: true,
            width: window.screen.availWidth,
            height: window.screen.availHeight,
            windowWidth: document.body.scrollWidth,
            windowHeight: document.body.scrollHeight,
            x: window.pageXOffset,
            y: window.pageYOffset,
        }).then((canvas) => {
            //处理你生成的canvas
            let a = document.createElement('a'); // cxt.toDataURL()
            a.setAttribute('href', canvas.toDataURL('image/png', 1)); //toDataUrl：将canvas画布信息转化为base64格式图片
            a.setAttribute('download', 'downImg'); //这个是必须的，否则会报错
            a.setAttribute('target', '_self');
            a.click();
            a.remove();
            document.body.appendChild(a);
        });
    };

  <Button type="primary" onClick={() => canvasImg}>
     下载
  </Button>

在这里如果直接在react项目里面粘贴使用了，报错了骂街骂楼主，sb楼主写的垃圾帖子，别慌往下看

     let codeUrl = 'https://rcms-1256904754.cos.ap-nanjing.myqcloud.com/appCode/1620467413341.png';
       convertImgToBase64(codeUrl, (base64Img) => {
          setCurrentQrCodeUrl(base64Img); // img标签图片是解析的一个base64位图片，这个是由canvas先转成一个base64的，以防图片有跨域现象在里面加了crossOrigin
       });

       const convertImgToBase64 = (url, callback, outputFormat) => {
        var canvas = document.createElement('CANVAS'),
            ctx = canvas.getContext('2d'),
            img = new Image();
        img.crossOrigin = 'Anonymous';
        img.src = url;
        img.onload = () => {
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0);
            let dataURL = canvas.toDataURL(outputFormat || 'image/png');
            console.log(dataURL);
            callback.call(this, dataURL);
            canvas = null;
        };
    };

这样来解决解决下载海报时候谷歌浏览器，下载不带img图片，火狐浏览器上面却可以下载，现在用base64就可以解决了，我觉得用图片转成svg也是可以的，但是我还没有做就跟大家分享了，

说到最后希望这篇帖子能够帮助到你，代码可以抄但是更得理解，多敲才是王道希望你对代码有着真挚的感情，对自己敲出的代码都有不一样的自信，感谢您的浏览，愿你出走半生，归来仍是少年