How to make transparent color white instead of black in html2canvas?

Question

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?

score 20 · Accepted Answer · edited Jul 16 '22 at 06:41

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.

edited Jul 16 '22 at 06:41

ThatsJustCheesy

1,370
14
24

answered Sep 15 '14 at 06:33

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

score 10 · Answer 2 · edited Aug 06 '16 at 06:32

10

Try this

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

edited Aug 06 '16 at 06:32

Andrei Volgin

40,755
6
49
58

answered Mar 17 '13 at 17:51

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

score 9 · Answer 3 · answered May 30 '18 at 10:57

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

score 6 · Answer 4 · edited May 23 '17 at 12:18

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

score 1 · Answer 5 · answered Aug 29 '16 at 19:14

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

score 1 · Answer 6 · answered Aug 15 '18 at 10:04

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

                   html2canvas(element, {
                       background: '#FFFFFF',
                       onrendered: function (canvas) {
                           $("#previewImage").append(canvas);
                           getCanvas = canvas;
                       }
                   });

score 0 · Answer 7 · answered Feb 21 '19 at 17:17

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

score 0 · Answer 8 · answered Jun 06 '19 at 06:32

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

How to make transparent color white instead of black in html2canvas?

8 Answers8

Linked

Related