Html2canvas: Problems with background images

[shauchenka]

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:

Rendered:

html2canvas: 0.4.0
MacOs 10.6 Chrome 29.0.1547.62

Thanks!

[niklasvh]

Appears to be fixed with 0.4.1 (in develop branch). Probably related to #256

[niklasvh]

Could you try with 0.4.1 and see if the problem still exists?

[manuelpaulo]

Hello. I have exactly the same problem. Yes, problem still exists in 0.4.1. Thanks for all the help.

[ymorin007]

I'm having the same issue ... Any solution yet? Thanks Niklas for this amazing script.

This code won't render.
div class="mc-image " title="" style="background-image:url('http://eterni-t.design.s3.amazonaws.com/381/theme-154-original-1.jpg'); width:1025px; height:780px; z-index: 9999"

[ymorin007]

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

[niklasvh]

@ymorin007 Are you on Mac and Chrome/Opera/Safari and/or using the latest commit (i.e. built the script yourself)?

[ymorin007]

Windows7 Chrome Version 30.0.1599.101 m

[BarryDam]

Temp fix :

change line 2818 to

ctx.fillStyle = (options.background !== undefined) ? options.background : parsedData.backgroundColor;

[alexandrethsilva]

It's definitely related to two options of the background-size: contain or cover.

[ymorin007]

The latest commit (html2canvas 0.4.1) fixed it for me

[jfrux]

Mine is still doing this even after the latest commit...

My background-size is set to 'cover' and I've also tried 'auto 100%' and still it's just white / transparent.

If I remove background-size, it captures just fine... any more tips?

[hernan604]

Temporary fix, use:

background:url("...base64...")

and dont use

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

[mobichel]

I have an issue with backgound images when url contains relative path to upper directory background: url("../i/alerts-16x.png")

It works if relocate png in following way background: url("i/alerts-16x.png")

[fperich]

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!

[janmd]

Im on version 0.4.1

I am also having problem with background.

I changed live 350 as suggested by fperich but did not help.

Also tried the base64 background image recommended by hernan also no joy.

The url I am trying to convert is this
http://prompter.rareapps.org/prompt/prompt-save3.php?p=123

It converts with background when I use the webpage renderer here
http://html2canvas.hertzen.com/screenshots.html

But on my own page it does not have background. See sample here
http://prompter.rareapps.org/prompt/prompt-save3.php?p=123

The code I am using is this

<script type="text/javascript">
$(window).load(function() {
    html2canvas(document.body, {
        onrendered: function(canvas) {
        window.location.href = canvas.toDataURL('image/jpeg');
    },
    allowTaint: true,
    taintTest: false
    });
});
</script>

It basically let the page load and convert itself to image.

Anything wrong with my code?

Thanks

[oso0521]

fperich u rock man !! thanks

[mitni455]

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

[Jehyeok]

Thank you fperich :D it worked well

[usmonster]

@shauchenka @niklasvh Would you say this issue is resolved? Can/should this issue be closed?

[r14n]

Using 0.4.1 (both release and developer latest), my child elements' background image (the children are sprites) don't show up on the canvas, in Chrome for Windows at least. Firefox for Windows is working fine though. On Chrome for Mac I get a black square where the span with the background image is. I tried fperich fix but it didn't work for me. The background image is on the same origin, all files are in same directory on the server.

[usmonster]

@4gstudios Can you put a simplified example in a jsfiddle (or at some publicly-accessible link) to demonstrate the problem?

[r14n]

@usmonster sure. i didn't use jsfiddle because i didn't want the images to be external, so we can rule out cross-origin issues.

now guess what. while i was preparing this, i realized that the issue seems to be with the png i want to use for my sprites. at first i thought maybe file size, but it seems to actually be an issue with the dimensions of the png.

it could have something to do with the amount of information contained within the png as more complex png seem to exhibit the issue at relatively smaller dimensions. i don't think it necessarily has to do with file size as i've messed around a bit with png optimization via tinypng.com and a larger-dimensioned image with smaller file size will have the problem while a smaller dimensioned image with larger file size won't.

check out my example: http://4gstudios.com/html2canvas/

the blue box renders fine (bg image is 100x7800 pixels / 374kb)
the red box does not render correctly (bg image is 100x25000 pixels / 254kb)
-in OS X Chrome (black box)
-OS X Safari ("no" box)
-and likely Win Chrome (was happening yesterday but not near a PC atm)
-OS X Firefox seems to work fine.

hopefully i've illustrated what i believe to be the issue well and we can solve it. the sprite i want to use in my project has over 800 different css rules and i REALLY don't want to have to change it!

edit: my example uses 0.4.1 but i'm having the same issue when i tried 0.5.0rc1

[usmonster]

I don't have OS X available to test, but it seems to work fine on Chrome 37 on Windows (Vista) and Chrome 38 beta on Linux (Debian wheezy). What version of Chrome are you using? Have you tried testing in incognito mode / with all extensions turned off?

[r14n]

@usmonster Just tried on Chrome 36 (Win7) and then updated to Chrome 37 (Win7), still having the issue

[usmonster]

@4gstudios if you turn on logging, what do you see in the browser console?

Also, please update the example on your site to use only what's currently in the master branch, even if it has the same issue. It will greatly help with debugging.

Thirdly, please also verify whether or not this issue appears even when all Chrome extensions are disabled. (If so, I wonder if it's a timing issue, as in maybe the download and/or rendering of the image is too slow?)

[r14n]

@usmonster

1) logging is on....
html2canvas: Preload starts: finding background-images html2canvas.js:21
html2canvas: Preload: Finding images html2canvas.js:21
html2canvas: Preload: Done. html2canvas.js:21
html2canvas: start: images: 1 / 2 (failed: 0) html2canvas.js:21
html2canvas: start: images: 2 / 2 (failed: 0) html2canvas.js:21
Finished loading images: # 2 (failed: 0) html2canvas.js:21
html2canvas: Renderer: Canvas renderer done - returning canvas obj html2canvas.js:21

2) Updated to master branch html2canvas.js

3) Yes, I tried with all disabled. If it is timing, I don't think it's the download time, but rendering quite possibly yes.

[usmonster]

@4gstudios Do you have another machine to test on? Also, the live link still looks like it's using 0.4.1.

[r14n]

@usmonster oh ok my bad, i fixed that. just tested it also on a WinServer2012 machine,Chrome 37, same issue with the black box rendering in place of bg

[usmonster]

Hm, I still can't reproduce the issue on either of my available machines, but a colleague could on his Windows 7 machine. @niklasvh, @brcontainer any ideas? I'm thinking it's something to do with platform-specific GPU-accelerated compositing/rasterization.. I'll try to test this later this week if I can get access to my W7 machine, but I'm curious... @4gstudios, what happens if you halve your second image and test again? And keep halving it (and adjusting the CSS rule) until the bug maybe goes away? I want to see if there's an "interesting" region of the PNG that triggers this issue.

[brcontainer]

@usmonster Occurred on my Windows 7 x64 with Chrome. I will try to do a DEBUG.
There are some problems that occur in windows7x64 but does not occur in version 32, I believe it is a bug of Chrome.

[niklasvh]

I am fairly sure this is related to the size of the original image. There are a lot of varying results with rendering large images or large canvases, and as far as I know there isn't really any smart ways to detect support for any of it.

While not directly related to the size of the source image, the varying results will give you an idea of issues with large images and canvases have:

• http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element
• http://social.msdn.microsoft.com/Forums/windowsapps/en-US/53c368e5-042b-4c3f-8903-ee024f4f7933/canvas-max-size?forum=winappswithhtml5
• https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15

Probably should setup some tests for both max image sizes and canvas sizes for different browsers/os/memory limits to actually get a more solid understanding where the limits are and whether they can be circumvented somehow, by for example splitting the rendering it to smaller chunks.

@4gstudios @brcontainer how much memory do your devices have where you were able to replicate the issue?

[brcontainer]

@niklasvh

• Windows 7 Home Premium x64
• Intel Core i5 CPU M450 2.40Ghz
• 4 GB RAM

I will test on windows 32bit (so possible), but I believe the problem occurs only in Windows64bit

[brcontainer]

as I suspected, the problem only occurs in "Windows x64", as well as https://github.com/niklasvh/html2canvas/issues/206#issuecomment-17744888, in other words, work in Windows 32bit, failed in Windows 64bit, one probable bug Chrome.

[r14n]

@brcontainer the problem occurs for me in Chrome and Safari on OS X 10.7 as well...

[usmonster]

I also tested on my 32-bit Windows 7 machine, and everything works fine (no bug). This is definitely looking like a 64-bit system only problem--nice catch, @brcontainer! Another thing to note is that a new version of Chrome specifically for 64-bit systems was very recently released:

http://blog.chromium.org/2014/08/64-bits-of-awesome-64-bit-windows_26.html
https://www.google.com/chrome/browser/?platform=win64 (Windows download link)
http://blog.chromium.org/2014/08/mac-chrome-when-im-sixty-four-bits.html (Mac is still in beta)

For those that have encountered this problem, are you sure you're not still running the 32-bit version? I think you need to manually download the 64-bit version to get it. There's a chance that it might solve these problems.

[r14n]

@usmonster well my Windows7 is 64bit. The bug affects both 32bit and 64bit Chrome on Win7 64bit. I guess it affects some OSX machines as well. Thanks for the link to get the 64 bit version of Chrome, though it doesn't solve my problem :cry:

[brcontainer]

this sounds like a bug in Chrome and not an incompatibility with "Windows 64bit" (or Mac OSX)

[usmonster]

@brcontainer I agree that it looks like an issue with Chrome & WebKit browsers on 64-bit Windows & Mac (but not Linux.. at least not on my 64-bit Debian box w/ 8 GB RAM), though @4gstudios, were you able to see the bug on 32-bit Windows? And how much RAM did you have on your machines affected by the issue?

Would be nice to be able to reduce this issue to its root. The second PNG has gradients and much larger dimensions than the first PNG. If I had an affected machine to test on, I'd snip away at the "bad" PNG until I could tell if there's a particular problem region or size that causes it. (Possibly also of interest to @niklasvh: http://wkbug.com/52391)

[brcontainer]

@usmonster @niklasvh

In AppleWebkit (version 538.1) and "Safari 5.1.7" (version 534.57.2 - this browser does not get more updates) for Windows .then not perform (not fire/trigger).

So I could not test if it is a failure of "Webkit" or a failure of "Blink" (engine fork of Webkit in Chrome) or even a failure for lack of "RAM".

[usmonster]

@brcontainer I think it's safe to assume that since, according to @4gstudios, the bug was reproducible in both Safari and Chrome on OS X, it's a bug common to both Blink and WebKit engines, at least.

[brcontainer]

@usmonster I could not test the windows for that .then(...) does not run in AppleWebkit (version 538.1)

[r14n]

@usmonster I've sort of done the snip-away thing while creating my example, but not in a super-scientific way. I'm going to try to document it better when I have some time, but that probably won't be for a week or so.

@usmonster, @brcontainer, @niklasvh , thank you for all your help with the issue

[codegiant2]

@niklasvh onrendered is deprecated. So what can I use instead? I'm using 0.5.0-alpha1.

Also the background image is not downloading though the images are in the same domain.

html2canvas($("#foredownload table"), {
logging : true,
onrendered: function(c) {
var myImage = c.toDataURL("images/jpeg");
$('#downloadableImage').prop('href', myImage);
}
});
Any help will be appreciated. Thanks

[usmonster]

@codegiant2 https://github.com/niklasvh/html2canvas#usage .

[ankitgandhi452]

Thanx fperich it worked for me!!

[AndyBoat]

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

[d-j-a-y]

I was face of a cropped body background image
(small bounds.height from NodeContainer.prototype.parseBackgroundSize - html2canvas 0.5.0-beta3 ) my

body {
    background-image: url(./res/bg.jpeg);
    background-repeat:no-repeat;
    background-position:center center;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

SOLVED adding

html, body {
   margin: 0;
   padding: 0;
   height: 100%;
}

Thank's niklasvh and all contributor for this nice piece of code!

[balajibecs20]

i am also having same problem ,i am loading from s3 image not showing in canvas,but i am loading locally in my system is working fine how can i solve

[gopiss]

me also having the same issue.

background-image failed to load. i am getting error message Error loading background:

jsFiddle here

Please help me to fix this issue.
Thanks,

[fxmontigny]

Hi @gopiss,

Use corse option.

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

[gopiss]

@fxmontigny.
Still the border-image loading issue exist. see my updated JSFiddle.
border image not loading only showing black color border.

[hikmat30ce]

I am facing the same issue. below is logs from chrome console
html2canvas: Preload starts: finding background-images
html2canvas.js:21 html2canvas: start: images: 1 / 1 (failed: 0)
html2canvas.js:21 html2canvas: start: images: 2 / 2 (failed: 0)
html2canvas.js:21 html2canvas: Preload: Finding images
html2canvas.js:21 html2canvas: Preload: Done.
html2canvas.js:21 html2canvas: start: images: 2 / 2 (failed: 0)
html2canvas.js:21 Finished loading images: # 2 (failed: 0)
html2canvas.js:21 html2canvas: Error loading background:
html2canvas.js:21 html2canvas: Renderer: Canvas renderer done - returning canvas obj

[niklasvh]

Is this still an issue with v1.0.0? If so, could you please share an example on jsfiddle.

[no-response[bot]]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

[jacobclarke92]

Just commenting as this may help someone.
My issue was that locally everything was working but on production it was failing to render css background images.
Reason was that we were using CloudFront -- which means that the urls in the css file were referring to assets on the cloudfront domain, while the JS was being executed on a seperate domain.
However html2canvas log wasn't indicating that it was a cors issue.
'useCORS' doesn't seem to work on its own as I think it requires a proxy url or something.

[RamyaGonchigar]

@jacobclarke for me also same issue when using html2canvas to capture the background images on canvas in local S3 images are capturing But in production it is not capturing the background images. my html2canvas version is v1.0.0