So I have had my share of problems with images and wkhtmltopdf. I am trying to convert this html (jsfiddle), to a pdf using wkhtmltopdf (0.12.2.1). However, wkhtmltopdf crops my potato.
Does anyone have an idea how I can make it stop cropping my potato?
I already applied a hack to the html in order to get images to display properly. After extensive research I found that wkhtmltopdf doesn't like clip-path, so I replaced all clip-path's with clip-path="none". Then my images worked, until now that I try to text-align:center them.
Any suggestions are greatly appreciated.
When I found this I hoped I would find the answer to this very issue.
I found the answer at the bottom of this question: wkhtmltopdf + mixed photo colors
Check out #catchdave's response almost 4 years after the OP.
TL&DR, for whatever reason, you need to add opacity: .99 to your image css.
Hope this helps others as I wasted 2 full days debugging this issue before I found the solution!
Related
Is there a way to display so many images ? Maybe something like google maps, that would show all images at once as tiles and you could zoom in and see the picture in detail... ?
This problem can be easily solved by merging all images side by side like a collage.
This task can be automated by using python using its pyautogui module and any simple software for image manipulation.
By doing this a single image of very high resolution can be obtained achieving your purpose.
(Although the size of the image would be mind blowing.)
See these sites for similar works (1.2 Billion images) but with smarter solution (the are loading few images at a time upon zooming).
All 1.2-Billion Facebook Profile Pictures On One Page
The Face of Facebook
Ok, it took very long time to process and finish, but I made it ! It CAN be done. correct tools are libvips and its python version pyvips I managed to get all 366 000+ pictures in one, and then made zoomable pyramid dzi with it ! To display it OpenSeadragon since the final picture was 81GB and nothing can open that.... http://deepzoom.reverz.sk/ ( also not sure why my question was down voted :-/ )
Since some days I'm experiencing this problem.
Here is my debug
The image provided is bigger than 200x200 px, it has unique link and there is any redirection on that page.
Linter response is 200.
When I copy and past page's link on fb it give me the choice between 3 images that are smaller than 200x200px and the one I've provided is ignored.
But If I try to share it through "Like button" or "Send button" it works fine.
It sounds like a fb Bug.
Thx
I solved using informations from this and this posts.
You can try using an image that is bigger than 200x200, with dimensions multiple of 100, and squared.
Other useful stuffs are using jpg extension, host the image in the same server of the website and avoid any "strange" chars in filename.
I tried many of the suggestions on this post and others to no avail. The thing finally worked for me (which I have not seen elsewhere) was to add the correct prefix to the element which I previously was missing entirely.
<head prefix="og: http://ogp.me/ns#">
Not sure if that actually fixed the problem for good or it just jogged the debugger into re-scanning the image (properly) but hopefully it helps someone else.
I got it done by renaming the image and the og:image url. Give it a try.
I have been struggling with this for a while too. I have tried all shapes and size for the image, renaming it, adding specific og:image:height and :width tags, etc.
The way I 'solved' it is just putting the image I want to show up in the website's root directory and point in og:image to another (1500x1500, btw) image. Facebook linter then tells me that it will use the image in the root directory. And that just works fine ;-)
Even if your image size is not in multiples of 100, it should work if your image is in jpg or jpeg format.
If your image is in png format, no matter what the size is, it will not work. This is based on my tests only. I would like to hear from other devs here.
I use png's all the time. I always use 1920 x 1080 because they look so good on Facebook shares. 85% of the time they work, sometimes they don't. Sometimes I delete and reload the same photo without renaming or changing a thing and it all of a sudden works. I'm not a real dev so that's all I can offer.
I tried most of these suggestions - double-checked the <head> prefix, tried adding the javascript sdk, tried square images, sourcing from different locations, simplifying the file name...
What finally worked was making sure an <img> tag for the same image appears in the body! I hid it with CSS / inline style.
i have problems to obtain good thumb from some images, when the original images are striped or checked shirt.
With the magento's gd2 library resize() in Varien_Image_Adapter_Gd2 class (magento 1.5 version) i obtain an image with a strange effect that modify the aspect of real image.
I can't find the name of this effect, so i can't search this issue on google! :(
You can see my issue in these 2 images:
As you can see, on the thumb image there are some rolling strange lines in particular in top-left position.
The issue is more evident on checked shirt, so i have to find a solution to correct this.
If anyone have some tips on this issue, please said me! :)
thx
Luca
'Moire' is the pattern you describe and it is particularly visible due to use of 'gd2' library which may or may not use bicubic scaling.
I am not sure that #Guerra has understood the problem here, but, to me, it is a straightforward lack of bicubic (or better) scaling.
See the answer on this question and follow the link:
https://stackoverflow.com/a/255666/1617149
So you may want to scale your images for the frontend using imagemagick instead of the standard gd2 library that comes with Magento and use a filter.
You can run imagemagick through php (the proper way), or, if you have complicated image processing on the go, you can go commandline 'exec' and prototype your image processing that way. I don't have any ready-to-roll code for that, however, that is what you need: better thumbnail rendering than you get with gd2.
Try use cloudzoom, he autosize your images to fit on your needs.
http://ecommerce-team.com/cloud-zoom.html
My brain is overflow about this issue, so let me share my frustration in order to look for someone having the same experience and, luckily, finding a solution.
The thing is the following:
http://jsfiddle.net/w4d2E/
In chrome, percentages work fine, but when trying the same in Firefox (latest version) the content div is not expanding horizontally and vertically anymore.
I've analyzed every similar question over here, but I can't find any valid answer.
Thanks in advance
P.S.: I've tried to use block display instead of the 'box' one in the 'content' layer, but still having the same behavior.
You're using XUL box layout. I suggest not doing that. -moz-box is NOT CSS flexbox layout, as you seem to think.
The problem here is display: -moz-box for body. If you remove it everything works fine. It appears to be a bug, so I suggest filing a report in the bug tracker.
I have a page with color and black & white images, when I use wkhtmltopdf to generate a pdf from the html file,
I get only the color images, how can I get it to print all the images, I have tried the advance options, but no success.
If I print in grayscale, then all the images are coming, but I don't want grayscale.
Any help?
I figured out how to solve this problem, I tried a trial-and-error method and figured out that if we provided the following parameters all the images irrespective of color or B&W, it would come up
wkhtmltopdf --image-quality 75
NOTE: Any value <= 75 works, higher value print a blank space for B&W images only
This question is old, but I'll add this in case someone has a similar issue and is unable to upgrade.
I found that applying this CSS solved the problem of non-color image rendering for me.
img {opacity: 0.99;}
To follow on from my comment above:
Changing the image quality only helps some cases
I contacted the developer (antialize) and he has now fixed this issue on his staging branch.
There isn't a release yet with this fix, so you will have to compile it yourself.
If you compile using the latest staging branch, all images now work as expected. Remember to compile following the "Installing QT yourself" instructions.
Furthermore, if you want to compile statically, see my note (on the compilation wiki page, made on Dec 19, 2011) about editing two files to allow static compiling of webkit (the 2 files that need to change are /tools/configure/configureapp.cpp and configure).