Question

So I rotate an image with php and make the background transparent. The problem is that I get jagged edges. Is there any way to like anti-alias the edges?

I’m using http://www.exorithm.com/algorithm/view/rotate_image_alpha It was the only code i could find that would let me have transparency for the background

Answer 1

I don’t have a solution for the jaggies produced by PHP’s rotation, but….

You haven’t stated what you’re doing with the rotated images once they’ve been rotated? Are you just displaying them like that on the web site?

If that’s all you’re doing, may I suggest you consider letting the browser do the rotation for you with CSS.

The following stylesheet code will work with ALL current browsers (including older versions of IE):

.tilted {
  transform: rotate(45deg);  /* CSS3 (for when it gets supported) */
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);  /* FF3.5+ */
  -o-transform: rotate(45deg);  /* Opera 10.5 */
  -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
  font-weight:bold;
  filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
}

(that’s a 45 degree tilt; feel free to modify it for other angles, though you’ll have to recalculate the radians for the IE6/7/8 filters yourself!). You may need to make other tweaks to get it working for yourself, like setting the height and width, etc, but all other CSS styles should continue to work as normal with this.

Now you don’t need to have PHP do the hard work; the browser can do it. Even better, because it’s in the browser, you can do stuff like change the rotation on the fly with Javascript.