Skip to content Skip to sidebar Skip to footer
Home / Background Image / Html / Html2canvas

Html2canvas Missing Background

Post a Comment
I am using html2canvas to generate image from my html page. When I enter my url http://prompter.rareapps.org/prompt/prompt-save2.php?p=123 in webpage renderer of html2canvas websit

Solution 1:

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><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"><metacharset="UTF-8"><scripttype="text/javascript"src="html2canvas.js"></script><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.11.0.min.js"></script><styletype="text/css">html, body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        body {
            font-family: Georgia, serif;
            font-size: 4em;
        }
        p {
            padding: 5px0;
            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: 5em2em02em;
            font-weight: bold;
        }
        #articlep.info {
            font-size: 0.2em; padding: 40em0;
        }
    </style><scripttype="text/javascript">//<!CDATA[functionsave(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><divid="main"><inputvalue="Generate Image"id="save-image"download="YourFileName.jpg"type="button"><divid="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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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><pclass="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.

Solution 2:

There is a problem with background images whose background-size attributes are set as cover in 0.4.1 version which is the latest version currently available.

The solution provided from 'fperich' in this page solved my problem: https://github.com/niklasvh/html2canvas/issues/265

According to his solution, just update line 350 in the version 0.4.1 with the following statement:

topPos = isNaN(parseInt(bgposition[1], 10)) ? topPos : parseInt(bgposition[1], 10);

Solution 3:

explicitly set a background style Eg. if

...
 html2canvas(document.body,
        {
            onrendered: function(canvas){
                 var imgData = canvas.toDataURL("image/jpeg");
                var doc = newjsPDF('p','mm');
                doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);
                doc.save($.now()+'.pdf');
        }

the pdf has blank (black) background,

now if you add CSS style

body {
         background-color: white;
     }

the blank (black) background is corrected

Post a Comment for "Html2canvas Missing Background"