HTML2Canvas 问题 - 导出时绿色覆盖

Question

我在 bootstrap 卡片中显示 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);
  }
});

Answer 1

不直接回答您的问题，而是提供替代方案：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>

Answer 2

如果您尝试导出带有框阴影的 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。

HTML2Canvas 问题 - 导出时绿色覆盖

Issue with HTML2Canvas - Green overlay while exporting

html2canvas

chart.js

angular