[Chartjs]-Issue with HTML2Canvas – Green overlay while exporting

by

6👍

✅

Looks like there is an issue with html2canvas if you try to export a div with box-shadow. In my case the div has:

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

So, I wrapped my div inside another div which has no box-shadow and also set the background of card-body to white explicitly.

0👍

Not directly answering your question, but offering an alternative: Chart.js provides a native method – .toBase64Image() – for generating a data URL in PNG format.

Here’s a working example using your code to download a copy of the image via button click:

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>

Leave a comment