CSS 过滤器属性在 html2canvas 中不起作用

Question

我目前有一个带有图像的 div，要下载它，我使用以下代码：

  const handleDownloadAll = () => {
    const downloadPromises = [polaroidContainerRef.current].map(
      (previewRef, index) => {
        polaroidImageRef.current.style.zoom = "100%";
        return html2canvas(previewRef).then((canvas) => {
          const imgDataUrl = canvas.toDataURL();
          const link = document.createElement("a");
          link.href = imgDataUrl;
          link.download = `image(${index}).png`;
          link.click();
        });
      }
    );

    Promise.all(downloadPromises)
      .then(() => {
        polaroidImageRef.current.style.zoom = "130%";
        console.log("Download success");
      })
      .catch((error) => {
        console.error(error);
      });
  };

div 用于在图像周围添加边框（宝丽来风格）。 但是，当添加 CSS 过滤器和缩放属性时，下载图像时，样式不会被拾取。

能否告诉我是否需要进行进一步的配置或者是否不支持某些 CSS 属性？

我设法通过在下载图像之前删除缩放并在之后添加它来解决缩放问题，但我真的不知道如何使用过滤器。

Answer 1

我发现这个帖子讨论了一个可以替代 html2canvas 的库，即 dom-to-image (github.com/tsayen/dom-to-image)