html2canvas grey background removal

Question

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?

Thanks

Annoying

Answer 1

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

Agata

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

Manion

Code only answers can almost always be improved by the addition of some explanation of how and why they work? – Teresetereshkova

so what element is the css being applied to? the map container? Because I applied it to map container and export is still grey. The only thing I can see is the Map controls at the top left that says "Map" "Satellite" – Hoang

Answer 3

Try adding scale value to it

html2canvas(element, { scale: 1.1 })

For me it worked this way

Pettifogger

Answer 4

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.

Annoying

Answer 5

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

Masuria

It's better to do this in the options.onClone function, so you don't have to reset styles. html2canvas.hertzen.com/configuration – Lubricious

Answer 6

In your print CSS, put:

* {
    box-shadow: none !important;
}

This will forcefully remove all box-shadow rules from your CSS.

Crews

Thanks but this was answered 5 years ago :) – Annoying