如何解决HTML2Canvas Image Cross Origin问题？

Question

我正在尝试将DOM元素转换为PNG图像。一切正常，除了交叉原点图像，这些图像在图像中显示为空空间。我尝试添加额外的用户道具：是的，但这无效。

这是代码：

 const exportAsPicture = () => {
    var html = document.getElementsByTagName("HTML")[0];
    var body = document.getElementsByTagName("BODY")[0];
    var htmlWidth = html.clientWidth;
    var bodyWidth = body.clientWidth;
    var data = document.getElementById(`${idea.slug}`);
    var newWidth = data.scrollWidth - data.clientWidth;
    if (newWidth > data.clientWidth) {
      htmlWidth += newWidth;
      bodyWidth += newWidth;
    }
    html.style.width = htmlWidth + "px";
    body.style.width = bodyWidth + "px";
    data.style.boxShadow = "none";
    console.log(data);
    html2canvas(data, {
      logging: true,
      letterRendering: 1,
      proxy: "https://notepd.s3.amazonaws.com/",
      useCORS: true,
    })
      .then((canvas) => {
        var image = canvas.toDataURL("image/png", 0.1);
        data.style.boxShadow = "0px 4px 4px rgba(0, 0, 0, 0.08)";

        return image;
      })
      .then((image) => {
        saveAs(image, `NotePD | ${idea.title}.png`);
        html.style.width = null;
        body.style.width = null;
      });
  };

  const saveAs = (blob, fileName) => {
    var elem = window.document.createElement("a");
    elem.href = blob;
    elem.download = fileName;
    elem.style = "display:none;";
    (document.body || document.documentElement).appendChild(elem);
    if (typeof elem.click === "function") {
      elem.click();
    } else {
      elem.target = "_blank";
      elem.dispatchEvent(
        new MouseEvent("click", {
          view: window,
          bubbles: true,
          cancelable: true,
        })
      );
    }
    URL.revokeObjectURL(elem.href);
    elem.remove();
  };

图片来自S3Bucket，相同的原点图像呈现好

Answer 1

只需在图像中添加crossorigin =“匿名”它将解决问题