22

I'm trying to take a screenshot using html2canvas: 

var body = document.getElementById("body")
$(body).html2canvas({onrendered: function( canvas ) {  
     var urlData = canvas.toDataURL("image/jpeg");  
}});

My body's background is transparent, and therefore urlData because of jpeg has black background (not white like in browser).
How can I fix this behavior and make background color white in this case?

Anurag Srivastava
  • 14,077
  • 4
  • 33
  • 43
Zelzer
  • 561
  • 1
  • 5
  • 16

8 Answers8

20

I modified temporary: _html2canvas.Util.isTransparent from

_html2canvas.Util.isTransparent = function(backgroundColor) {
  return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");
};

to

_html2canvas.Util.isTransparent = function(backgroundColor) {
  return (backgroundColor === "transparent" ||
    backgroundColor === "rgba(0, 0, 0, 0)" ||
    backgroundColor === undefined);
};

and after that it was enough to call html2canvas with background parameter set:

html2canvas(screenshotElement, {
  background: '#FFFFFF',
  onrendered: function (canvas) {
    // ...
  }
});

For me... it makes sense to consider transparent a background that is undefined.

ThatsJustCheesy
  • 1,370
  • 14
  • 24
CRK
  • 1,299
  • 12
  • 9
  • 1
    Shouldn't it be "backgroundColor" instead of just "background" in the html2canvas code sample? – aze Jun 22 '19 at 20:53
  • Like aze said, the option name must have changed. It's [`backgroundColor`](https://html2canvas.hertzen.com/configuration) now – ThatsJustCheesy Jul 11 '22 at 20:53
10

Try this

var body = document.getElementById("body") 
$(body).html2canvas({background:'#fff', onrendered: function( canvas ) {  
 var urlData = canvas.toDataURL("image/jpeg");  
}});
Andrei Volgin
  • 40,755
  • 6
  • 49
  • 58
Sergey L
  • 547
  • 2
  • 5
  • 19
  • 1
    Thanks, here is the full code: function Snapshot() { html2canvas(document.body, { background:'#fff', onrendered: function(canvas) { var a = document.createElement('a'); a.href = canvas.toDataURL("image/jpeg", 0.9).replace("image/jpeg", "image/octet-stream"); a.download = 'snapshot.jpg'; a.click(); } }); – mosh Aug 22 '16 at 07:52
9

I'd say, it's even simplier now(30/05/18) - just pass backgroundColor: null in html2canvas options:

html2canvas(
    document.querySelector("#some-id-to-export"),
    {backgroundColor: null}
).then(canvas => {$("#id-to-render-transparent-bg-img").html(canvas);});
Oleksandr Khryplyvenko
  • 868
  • 1
  • 8
  • 16
6

https://stackoverflow.com/a/23928038/1815624

simply add css background-color:#ffffff to your table :)

hope this helps

I wrapped the content into a div for each desired page and gave class="pdfpage" then set the css as pdfpage{background:#FFFFFF;}

As I had commented it was not first thoughts that I needed to set the background of the rendered element as white since it was white already...But in truth it was colorless...

Community
  • 1
  • 1
CrandellWS
  • 2,708
  • 5
  • 49
  • 111
1
var body = document.getElementById("body")
$(body).html2canvas({onrendered: function( canvas ) {  
     var urlData = canvas.toDataURL("image/jpeg");  
},
background: '#fff'});

Two years later but updated version should accept a parameter like this . . .

Tom Woodward
  • 1,653
  • 14
  • 21
1

No worries, Now just add background: '#FFFFFF' , its working fine

                   html2canvas(element, {
                       background: '#FFFFFF',
                       onrendered: function (canvas) {
                           $("#previewImage").append(canvas);
                           getCanvas = canvas;
                       }
                   });
B.Nishan
  • 536
  • 4
  • 13
0

If you need the actual image data to be non-transparent, use fillRect(0, 0, width, height) with fillStyle 'white'.

Another way to do it but it's quite slow (few milliseconds maybe), is to use getImageData and putImageData and iterate threw each pixel to check rgba values and change them

Rivenfall
  • 1,189
  • 10
  • 15
0

html2Canvas and ngxcharts teams seem to have closed the bugs on this issue without providing any solution. Setting up fill property for rect via css classes didn't work.

This is how I ended up solving it, surprisingly it works:

 let rectElements = Array.from(document.getElementsByTagName('rect'));
  if (rectElements.length > 0) {
    rectElements.forEach(rect => {
      rect.setAttribute('fill', '#ffffff');
    });
  }
s p
  • 1