2

I have an issue with wkhtmltoimage when i try to render a rotated image it comes out smudged (this only happens with this image).

This is a test of out happens (i made a static html to test it)

This is the image:

Image

This is how it comes out when i rotate it:

Image

When i dont rotate the image it comes out fine...

And finally the html:

<div style="background: #dfdfdf;width:300px;height:300px;padding:100px;">
<img src="tenChairs.png" style="width:150px;"></div>
WalksAway
  • 2,769
  • 2
  • 20
  • 42
  • I suspect that the padding has something to do with it. You only have room for 100px because of the padding, but you're setting the image width at 150px. So the image is being resized, which could be a clue as to why it's so blurry. How are you doing the rotation? – mikeyq6 Feb 02 '16 at 17:26
  • this is just an example of it, i added the padding to make it look a bit more pleasant, but no it has nothing to do with the padding i'm afraid, the rotation is basically done in css with transform: rotate(90deg);-webkit-rotate(90deg) – WalksAway Feb 07 '16 at 11:57
  • I've done a [jsfiddle](https://jsfiddle.net/z1an1u3y/) of it, and it looks ok. What browser are you testing it on? I notice that on IE11, it looks a little pixellated. Perhaps [this answer](http://stackoverflow.com/questions/11832131/cross-browser-way-to-rotate-image-using-css) can help as well. – mikeyq6 Feb 08 '16 at 09:11
  • you miss understood, it looks fine in the browser only when i try to turn it into an image it becomes pixellated, Im using wkhtmltopdf... – WalksAway Feb 14 '16 at 16:39
  • Did you find a solution to this @WalksAway ? – Barry Apr 05 '17 at 07:27
  • @Barry no but it's irrelevant now – WalksAway Apr 05 '17 at 08:41
  • Irrelevant to you perhaps! For reference, I've also run into this problem and the only way I've found to work around it is to change the image format from PNG to JPG - despite other PNGs being fine. I'm not sure what it uses for imagine manipulation under the hood, but it varies between my local and production environments. – Barry Apr 05 '17 at 13:53
  • @Barry oh i thought you were going to propose a solution XD, it seemed to happen with only some images, like the one i posted, even though i never solved it, i would still love to find out what that issue was... – WalksAway Apr 05 '17 at 13:58

0 Answers0