HTML2Canvas 的问题 - 导出时出现绿色覆盖答案

【问题标题】：Issue with HTML2Canvas - Green overlay while exportingHTML2Canvas 的问题 - 导出时出现绿色覆盖
【发布时间】：2019-07-25 19:40:21
【问题描述】：

我在引导卡中显示一个带有其他信息的 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);
  }
});

【问题讨论】：

标签： angular chart.js html2canvas

【解决方案1】：

如果您尝试使用 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 包裹在另一个没有box-shadow 的div 中，并将card-body 的背景明确设置为white。

【讨论】：

非常感谢分享这个！我花了方式太多时间试图弄清楚这一点，我永远不会想到它是由 box-shadow 属性引起的（尽管它确实在他们的 documentation 中被列为不兼容）。包装它也对我有用。
div 内带有 box-shadow 的 div 确实有帮助，但并不完全，不幸的是......

【解决方案2】：

不直接回答您的问题，而是提供替代方案：Chart.js 提供了一种原生方法 - .toBase64Image() - 用于生成 PNG 格式的数据 URL。

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

let canvas = new Chart(document.getElementById("chart"), {
  type: 'line',
  data: {
    labels: ["a", "b"],
    datasets: [{
      label: "series1",
      data: [1, 2]
    }]
  }
});

document.getElementById("download").addEventListener("click", function() {
  var uri = canvas.toBase64Image(); // <-- use ChartJS native method.
  var link = document.createElement('a');

  if (typeof link.download === 'string') {
    link.href = uri;
    link.download = "filename.png"; //fileName;

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<button id="download">download</button>
<canvas id="chart"></canvas>

【讨论】：

谢谢，但我还需要将页面的其他部分（如标题）转换为图像。