wkhtmltopdf + mixed photo colors - image

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).

Related

Wkhtmltopdf cuts off images

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!

Provided og:image is not big enough

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.

Magento resize with gd2 bad image

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

Can't get Susy based grid to align properly

I have been trying out the Susy plugin for Compass (SASS), but I noticed that it isn't working as intended for me.
I took the index.html and screen.scss from the official Susy tutorial, compiled the SCSS and put it up on my server. As you can see it looks just like it's supposed to (on all browsers I tested it on):
What I did next was the following:
Copy the <article> in the <div role="main"> and paste it six times
In screen.scss, change the column-span (div[role="main"] > article) accordingly: from #include columns(6,9); to #include columns(1,9);
But now those new elements don't align to the grid at all, they are off by a clearly visible space. I tested this in recent versions of FF, Safari and Chrome, and only FF seems to display it correctly. Screenshot is from Chrome:
I also uploaded the source for everyone to inspect here.
Is this a general problem with Susy that the grid isn't correct or am I doing something wrong? If the first, does anybody know a workaround? I also tried with percentages and pixels, but neither worked.
Susy isn't just another grid system like all the others. It was designed to fulfill a very specific purpose: grids that are fluid on the inside. The units you use to create the grid are applied to the container, not to each column. Everything inside is built with percentages. What you are seeing is normal. It's true of all fluid grids, because of sub-pixel rounding. It's not a bug, it's a part of building responsive web sites.
If you need pixel-exact grids, Susy is the wrong tool for you. It all depends what you are trying to build.
Re-size your browser to see how it works. You'll notice the grids snapping-to and floating within a few pixels of their guides, but the grid stays intact and never triggers the horizontal scroll-bar.
Cheers!
-e

Mysterious PNG RGB+Alpha image that works with IE6

http://moztw.org/images/product-front-thunderbird.png
I am sure that this is a PNG image in RGB colors and a alpha channel (look at the shadow below the icon), but this file mysteriously works with IE6 w/o any special CSS hack (though it seems the alpha channel is being replaced by 2-bit mask in IE6).
Can anyone tell me exactly what information is in the file? It would be even better if someone could give a guidance on how to create such file. Thanks.
Edit: Friends at moztw.org added script hack to the website, so the above statement is no longer verifiable. But your are still welcome to investigate the image format.
That's PNG8+alpha. Explanation and examples in "PNG that works" article.
You can generate such files with pngquant (on a Mac, ImageAlpha is a GUI for it).

Resources