Angular 导出时出现HTML2Canvas问题-绿色覆盖

我正在引导卡中显示一个chartjs图表和其他信息，并使用html2canvas将该卡导出到图像。导出的图像有一个奇怪的绿色覆盖，如图所示

有什么我错过的吗

html2canvas(document.getElementById(image), {
  logging: false,
  allowTaint: false,
}).then(function (canvas) {
  var uri = canvas.toDataURL();
  var link = document.createElement('a');

  if (typeof link.download === 'string') {
    link.href = uri;
    link.download = fileName;

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } else {
    window.open(uri);
  }
});

---

不是直接回答您的问题，而是提供了另一种选择：Chart.js提供了一种本机方法，用于生成PNG格式的数据URL

下面是一个工作示例，使用您的代码通过单击按钮下载图像副本：

let canvas=new Chart（document.getElementById（“Chart”）{
键入：“行”，
数据：{
标签：[“a”、“b”]，
数据集：[{
标签：“系列1”，
数据：[1,2]
}]
}
});
document.getElementById（“下载”）.addEventListener（“单击”，函数）（）{
var uri=canvas.toBase64Image（）；//不直接回答您的问题，但提供了另一种选择：Chart.js提供了一种本机方法--用于生成PNG格式的数据URL

下面是一个工作示例，使用您的代码通过单击按钮下载图像副本：


let canvas=new Chart（document.getElementById（“Chart”）{
键入：“行”，
数据：{
标签：[“a”、“b”]，
数据集：[{
标签：“系列1”，
数据：[1,2]
}]
}
});
document.getElementById（“下载”）.addEventListener（“单击”，函数）（）{
var uri=canvas.toBase64Image（）；//如果您尝试导出带有方框阴影的div，则html2canvas似乎存在问题。在我的示例中，该div具有：

box-shadow: rgba(0,0,0,0.14) 0 4px 20px 0, rgba(76,175,80,0.4) 0 7px 10px -5px;

因此，我将我的
div
包装在另一个
div
中，该div没有
box shadow
，并且还将
卡体的背景设置为
white
。
如果您尝试导出带有box shadow的div，则html2canvas似乎有问题。在我的情况下，div有：

box-shadow: rgba(0,0,0,0.14) 0 4px 20px 0, rgba(76,175,80,0.4) 0 7px 10px -5px;

因此，我将我的
div
包装在另一个
div
中，它没有
box shadow
，还将
卡体的背景设置为
white
。
谢谢，但我也需要将页面的其他部分（如标题）转换为图像。谢谢，但我需要将页面的其他部分（如标题）转换为im年龄也一样。非常感谢你分享这个！我花了太多时间试图弄清楚这一点，我从来没有想到这是由
框阴影
属性引起的（尽管在他们的列表中确实列为不兼容）.Wrapping对我也有帮助。div inside div with box shadow确实有帮助，但不完全，不幸的是…非常感谢您分享这一点！我花了太多时间试图弄清楚这一点，我从来没有想到这是由
box shadow
属性引起的（尽管它确实在他们的列表中被列为不兼容）.包装它也帮了我的忙。div-inside-div-with-box-shadow真的很有帮助，但不幸的是，不是全部。。。