How to make transparent color white instead of black in html2canvas? - 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?

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

No worries, Now just add background: '#FFFFFF' , its working fine
html2canvas(element, {
background: '#FFFFFF',
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});

Answer 7

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

Answer 8

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