使用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也是可以的，但是我還沒有做就跟大家分享了，

說到最後希望這篇文章能夠幫助到你，代碼可以抄但是更得了解，多敲才是王道希望你對代碼有着真摯的感情，對自己敲出的代碼都有不一樣的自信，感謝您的浏覽，願你出走半生，歸來仍是少年