html2canvas 灰色背景去除答案

【问题标题】：html2canvas grey background removalhtml2canvas 灰色背景去除
【发布时间】：2022-02-01 05:14:02
【问题描述】：

如下图所示，我使用 html2canvas 生成的画布有一个奇怪的深色背景。我已经将 body、html 和大多数 div 背景调整为白色，但没有任何效果。有没有我可以用来修改它的选项？

谢谢

【问题讨论】：

标签： html2canvas

【解决方案1】：

这似乎是 box-shadow 的问题。尝试禁用并导出检查。 html2canvas 不支持 Box-shadow。

【讨论】：

【解决方案2】：

这解决了我的问题：

box-shadow: unset !important;

当我们使用上面的 CSS 代码时，我们可以清除相关 div 中的 box-shadow，这样 html2canvas 就可以轻松读取 HTML 的内容了。

【讨论】：

只有代码的答案几乎总是可以通过添加一些关于它们的工作原理和原因的解释来改进？
那么 css 应用于什么元素？地图容器？因为我将它应用于地图容器并且导出仍然是灰色的。我唯一能看到的是左上角的地图控件，上面写着“地图”“卫星”

【解决方案3】：

这是一个奇怪的事情，但即使我将主容器背景颜色设置为白色，它也没有反映出来。我想我会尝试在主容器中添加另一个 div，位置为绝对值，顶部 0，左侧 0，背景颜色为白色。

虽然我不完全了解发生了什么，但它成功了。

【讨论】：

【解决方案4】：

我不确定这有多聪明，但我用这种方式解决了一个类似的问题：


// A function that assigns a shadow style to an element
function setShadowStyle(el, shadowStyle) {
  el.style.boxShadow = shadowStyle;
}

// ... some functions omitted ...

function savePNG() {
  // Set the element with which we will work
  let graph = document.querySelector("#graph");
  // Set the element's shadow style to default
  const defaultShadowStyle = window.getComputedStyle(graph).boxShadow;
  // Removing the shadow before starting html2canvas
  setShadowStyle(graph, 'none');
  // We perform all the necessary actions of html2canvas
  html2canvas(graph).then(function (canvas) {
    let img = document.body.appendChild(canvas);
    download(img, "image/png", "graph.png");
    // Be sure to set some timeout, after which we remove the temporary canvas block
    setTimeout(function () {
      img.remove();
    }, 500);
  });
  // Return the original style of the shadow to the corresponding block
  setShadowStyle(graph, defaultShadowStyle);
}

【讨论】：

最好在options.onClone 函数中执行此操作，这样您就不必重新设置样式。 html2canvas.hertzen.com/configuration