javascript - 在 safari 浏览器中，无法使用 html2canvas 在反应中下载带有 html 内容的图像

Question

我能够使用 html2canvas 包下载带有 chrome 内容的图像，但在 safari 中我能够下载图像但内容没有显示/涂黑。使用以下代码进行点击事件 [Safari 下载图像预览][1]

    window.scrollTo(0, 0);
    const captureDOMItemArr: HTMLCollectionOf<any> = document.getElementsByClassName(
      'insight-content'
    );
    const captureDOMItem: HTMLElement = captureDOMItemArr[0];
    function downloadURI(uri: string, name: string) {
      const link = document.createElement('a');
      link.download = name;
      link.href = uri;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
    html2canvas(captureDOMItem, {
      allowTaint: true,
      foreignObjectRendering: true
    }).then((canvas: any) => {
      const img = canvas.toDataURL('image/png');
      downloadURI(img, 'screenshot.png');
    });
  }```


  [1]: https://i.stack.imgur.com/1n3U7.png

标签： javascriptreactjshtml2canvas

Answer 1

目前在 GitHub 上有一个未解决的问题。该问题还有一个非官方的解决方案。但似乎没有完美的答案。