How to Make Transparent Color White Instead of Black in Html2Canvas

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

I modified temporary: _html2canvas.Util.isTransparent from

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

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

change transparent color into white in html2canvas

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

hope this helps

How to generate a transparent canvas using html2canvas

You must pass backgroundColor as null
see: https://html2canvas.hertzen.com/configuration

let el = document.querySelector("#my-div")
html2canvas(el,{backgroundColor:null}).then(canvas => {
  document.body.appendChild(canvas)  
})

Working example: https://codepen.io/emilio/pen/oaGLmb?editors=1111

Change html canvas black background to white background when creating jpg image from png image

This blackening occurs because the 'image/jpeg' conversion involves setting the alpha of all canvas pixels to fully opaque (alpha=255). The problem is that transparent canvas pixels are colored fully-black-but-transparent. So when you turn these black pixels opaque, the result is a blackened jpeg.

The workaround is to manually change all non-opaque canvas pixels to your desired white color instead of black.

That way when they are made opaque they will appear as white instead of black pixels.

Here's how:

// change non-opaque pixels to white
var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
var data=imgData.data;
for(var i=0;i<data.length;i+=4){
    if(data[i+3]<255){
        data[i]=255;
        data[i+1]=255;
        data[i+2]=255;
        data[i+3]=255;
    }
}
ctx.putImageData(imgData,0,0);

html2canvas missing background

This problem is fixed in 0.5.0 version (But version 0.5.0 is not yet ready for use).

But have a lot of problems that are being corrected and basic functions that have not yet been implemented.

Note: html2canvas has no date forecast for 0.5.0 release
Note: version 0.4.1 no longer receives updates

The problem is that version 0.5.0 is not ready for use, I reworked your html, see:

<!DOCTYPE html><!--// Never put a space/break-line before the DOCTYPE -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">

    <script type="text/javascript" src="html2canvas.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        body {
            font-family: Georgia, serif;
            font-size: 4em;
        }
        p {
            padding: 5px 0;
            margin: 0;
        }

        #main {
            margin: 0 auto;
            width: 100%;
            min-height: 100%;
            font-weight: bold;
            background: white url('prompt-save-bg.jpg') center top repeat-y;
            max-width: 1263px; /* background-limit*/
            text-align: center;
        }
        #article {
            padding: 5em 2em 0 2em;
            font-weight: bold;
        }
        #article p.info {
            font-size: 0.2em; padding: 40em 0;
        }
    </style>

    <script type="text/javascript">
    //<!CDATA[
    function save(canvas) {/*html2canvas-0.5.0 work with Promise.js*/
        window.open(canvas.toDataURL());
    }
    $(document).ready(function(){
        $('#save-image').click(function () {
            html2canvas(document.body, {
                allowTaint: true,
                logging: true,
                taintTest: false,
                onrendered: save /*0.4.1*/
            }).then(save);/*0.5.0-rc*/
        });
    });
    //]]>
    </script>
</head>
<body>
    <div id="main">
        <input value="Generate Image" id="save-image" download="YourFileName.jpg" type="button">

        <div id="article">
            <h2>AUBREY</h2>

            <p>And Aubrey was her name</p>
            <p>A not so very ordinary girl or name</p>
            <p>But who's to blame?</p>
            <p>For a love that wouldn't bloom</p>
            <p>For the hearts that never played in tune</p>
            <p>Like a lovely melody that everyone can sing</p>
            <p>Take away the words that rhyme, it doesn't mean a thing</p>
            <p> </p>
            <p>And Aubrey was her name</p>
            <p>We tripped the light and danced together to the moon</p>
            <p>But where was June?</p>
            <p>No, it never came around</p>
            <p>If it did it never made a sound</p>
            <p>Maybe I was absent or was listening too fast</p>
            <p>Catching all the words but then the meaning going past</p>
            <p> </p>
            <p>But God I miss the girl</p>
            <p>And I'd go a thousand times around the world just to be</p>
            <p>Closer to her than to me</p>
            <p> </p>
            <p>And Aubrey was her name</p>
            <p>I never knew her but I loved her just the same</p>
            <p>I loved her name</p>
            <p>Wish that I had found the way</p>
            <p>And the reasons that would make her stay</p>
            <p>I have learned to lead a life apart from all the rest</p>
            <p>If I can't have the one I want, I'll do without the best</p>
            <p> </p>
            <p>But how I miss the girl</p>
            <p>And I'd go a million times around the world just to say</p>
            <p>She had been mine for a day</p>

            <p class="info">
                Prompter generated by RAREAPPS: http://prompter.rareapps.org
            </p>
        </div>
    </div>
</body>
</html>

Worked in 0.4.1 and 0.5.0-rc.
Worked in Chrome and Firefox.

Note that I created a function called save(), so you can switch between onrendered (version 0.4.1) or then (version 0.5.0-rc).

I put your background and a <DIV> not changed the <html> and not the <body> because the "html2canvas" is not smart enough to understand the manipulations of overflow: in the window.

Note that the margin:; in your last paragraph (<p>) caused problems both in "html2canvas" as in "Webkit" browser so I used padding:

Remember there is more than one way to do the same thing.

How to Make Transparent Color White Instead of Black in Html2Canvas