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

Question

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

我有什么想念的吗？

EmailModal

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

如果您尝试使用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的{​​{1}}中，并且还将box-shadow的背景明确设置为card-body。