'html2canvas grey background removal

As you can see in the picture below, the canvas I am generating with html2canvas has a strange dark background. I have already adapted the body, html and most div background to white with no effect. Is there an option that I can use to modifiy this?

enter image description here

Thanks

html2canvas


Solution 1:[1]

This seems to be an issue with box-shadow. Try to disable and export to check. Box-shadow is not supported by html2canvas.

Solution 2:[2]

This solved my problem:

box-shadow: unset !important;

When we use the CSS code above, we can clean the box-shadow from related div, so html2canvas can easily read the content of the HTML.

Solution 3:[3]

It is a strange thing, but even if I had set the main container background color to white, it was not reflected. I figured I would just try adding another div in the main container with position abdolute, top 0, left 0 and background color to white.

Although I do not have full understanding of what happened, It did the trick.

Solution 4:[4]

I'm not sure how smart this is, but I solved a similar problem in this way:


// A function that assigns a shadow style to an element
function setShadowStyle(el, shadowStyle) {
  el.style.boxShadow = shadowStyle;
}

// ... some functions omitted ...

function savePNG() {
  // Set the element with which we will work
  let graph = document.querySelector("#graph");
  // Set the element's shadow style to default
  const defaultShadowStyle = window.getComputedStyle(graph).boxShadow;
  // Removing the shadow before starting html2canvas
  setShadowStyle(graph, 'none');
  // We perform all the necessary actions of html2canvas
  html2canvas(graph).then(function (canvas) {
    let img = document.body.appendChild(canvas);
    download(img, "image/png", "graph.png");
    // Be sure to set some timeout, after which we remove the temporary canvas block
    setTimeout(function () {
      img.remove();
    }, 500);
  });
  // Return the original style of the shadow to the corresponding block
  setShadowStyle(graph, defaultShadowStyle);
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Fer Alvarez
Solution 2
Solution 3 mikegross
Solution 4 phoenixweiss

Related Questions