New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Problems with background images #265
Comments
Appears to be fixed with 0.4.1 (in develop branch). Probably related to #256 |
Could you try with 0.4.1 and see if the problem still exists? |
Hello. I have exactly the same problem. Yes, problem still exists in 0.4.1. Thanks for all the help. |
I'm having the same issue ... Any solution yet? Thanks Niklas for this amazing script. This code won't render. |
I've notice that if I remove background-size: cover; from my class="mc-image" it works. |
@ymorin007 Are you on Mac and Chrome/Opera/Safari and/or using the latest commit (i.e. built the script yourself)? |
Windows7 Chrome Version 30.0.1599.101 m |
Temp fix : change line 2818 to
|
It's definitely related to two options of the background-size: contain or cover. |
The latest commit (html2canvas 0.4.1) fixed it for me |
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? |
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. |
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") |
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! |
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 It converts with background when I use the webpage renderer here But on my own page it does not have background. See sample here The code I am using is this
It basically let the page load and convert itself to image. Anything wrong with my code? Thanks |
fperich u rock man !! thanks |
I second that, fperich, you are my favourite person right now! |
Thank you fperich :D it worked well |
@shauchenka @niklasvh Would you say this issue is resolved? Can/should this issue be closed? |
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. |
@4gstudios Can you put a simplified example in a jsfiddle (or at some publicly-accessible link) to demonstrate the problem? |
@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) 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 |
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? |
@usmonster Just tried on Chrome 36 (Win7) and then updated to Chrome 37 (Win7), still having the issue |
@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?) |
|
@4gstudios Do you have another machine to test on? Also, the live link still looks like it's using 0.4.1. |
@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 |
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. |
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:
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? |
I will test on windows 32bit (so possible), but I believe the problem occurs only in Windows64bit |
as I suspected, the problem only occurs in "Windows x64", as well as #206 (comment), in other words, work in Windows 32bit, failed in Windows 64bit, one probable bug Chrome. |
@brcontainer the problem occurs for me in Chrome and Safari on OS X 10.7 as well... |
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 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. |
@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 😢 |
this sounds like a bug in Chrome and not an incompatibility with "Windows 64bit" (or Mac OSX) |
@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) |
In AppleWebkit (version 538.1) and "Safari 5.1.7" (version 534.57.2 - this browser does not get more updates) for Windows 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". |
@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. |
@usmonster I could not test the windows for that |
@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 |
@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"), { |
Thanx fperich it worked for me!! |
@fperich |
I was face of a cropped body background image
SOLVED adding
|
Hi @gopiss, Use corse option.
|
@fxmontigny. |
I am facing the same issue. below is logs from chrome console |
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. |
Just commenting as this may help someone. |
@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 |
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:
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!
The text was updated successfully, but these errors were encountered: