Search code examples
angularchart.jshtml2canvas

Issue with HTML2Canvas - Green overlay while exporting

I'm displaying a chartjs chart in a bootstrap card with other information and exporting the card using html2canvas to image. The exported image has a weird greenish overlay as shown in the image.

Is there something I'm missing out on?

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);
  }
});

enter image description here

Solution

  • 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.