html2canvas: Problems with background images

Hi, guys!

Thanks for your work, h2c is an awesome tool! I have one small issue on page: http://king.fi/site/ - background image from body { … background: #070707 url(…/img/bg.jpg) no-repeat 50% 0; doesn’t render. With simple calling of h2c:

html2canvas($('body'), {
            allowTaint: false,
            logging:true,
            onrendered: function (canvas) {
                document.body.appendChild(canvas);
            }
        });

and with your test console http://html2canvas.hertzen.com/screenshots.html I have the same results:

Original: screen shot 2013-09-04 at 5 33 03 pm

Rendered: screen shot 2013-09-04 at 5 33 11 pm

html2canvas: 0.4.0 MacOs 10.6 Chrome 29.0.1547.62

Thanks!

About this issue

Original URL
State: closed
Created 11 years ago
Comments: 56 (21 by maintainers)

Most upvoted comments

i could not render background images and it seemed to be cover or contain background size, so i’ve changed line 350 in 0.4.1 version to:

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

and it works!

+28

fperich on Mar 6, 2014

Hi @gopiss,

Use corse option.

html2canvas(document.body, {
            onrendered: function (canvas) {
.....
            },
            useCORS: true
        });

fxmontigny on Aug 22, 2017

I second that, fperich, you are my favourite person right now!

mightyhorst on Jul 13, 2014

fperich u rock man !! thanks

oso0521 on Apr 22, 2014

I’ve notice that if I remove background-size: cover; from my class=“mc-image” it works.

ymorin007 on Nov 15, 2013

Thank you fperich 😄 it worked well

Jehyeok on Sep 1, 2014

@fperich u help me a lot!Thanks a lot!

AndyBoat on Sep 2, 2016

Thanx fperich it worked for me!!

ankitgandhi452 on Feb 23, 2016

Temporary fix, use:

background:url(“…base64…”)

and dont use <img src=“base64” and neither urls

Also, dont use “sprites” because html2canvas doesnt seem to understand that.

hernan604 on Jan 15, 2014