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

Zelzer picture Zelzer · Jan 29, 2013 · Viewed 20.3k times · Source

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?

Answer

CRK picture CRK · Sep 15, 2014

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(screenshot_element, {
    background :'#FFFFFF',
    onrendered: function (canvas) {
      .....
    }
  });

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