使用 html2canvas 生成分享图片，CDN图片不展示问题

import html2canvas from 'html2canvas';
const shareContent = document.getElementById("capture"); // 要生成截图的内容区域
(window.html2canvas || html2canvas)(shareContent, {
  useCORS: true, // 允许跨域 + 设置 <img crossOrigin="Anonymous" />
  scrollY: 0,
  scrollX: 0,
  height:shareContent.offsetHeight - 2,
}).then((canvas) => {
  console.log("生成整个图片");
  setUrl(canvas.toDataURL("image/png", 1))
})
复制代码

// 传入 cdn 地址
function convertUrlToBase64(url) {
    return new Promise((resolve) => {
        let img = new Image();
        img.crossOrigin = 'Anonymous';
        img.src = url;
        img.onload = function () {
            let canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            let ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, img.width, img.height);
            let ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase();
            let dataURL = canvas.toDataURL('image/' + ext);
            let base64 = {
                dataURL: dataURL,
                type: 'image/' + ext,
                ext: ext
            };
            resolve(base64)
        }
    })
}
复制代码

const bgImg = document.getElementsByClassName('photo')[0];
const avatarImg = document.getElementsByClassName('avatar')[0]
Promise.all([convertUrlToBase64(bgImg.src), convertUrlToBase64(avatarImg.src)])
    .then(([base641,base642]) => {
        bgImg.src = base641.dataURL;
        avatarImg.src = base642.dataURL;
        (window.html2canvas || html2canvas)(shareContent, {
          useCORS: true,
          scrollY: 0,
          scrollX: 0,
          height:shareContent.offsetHeight - 2,
        }).then((canvas) => {
          console.log("生成整个图片");
          setUrl(canvas.toDataURL("image/png", 1))
          Toast.hide();
        })
})
复制代码