Welcome to the MacNN Forums.

moonmonkey · May 10, 2005, 04:44 AM

Is this possible, can someone give me a really simple example?

I want to rotate a PNG image by 90 degrees.

Hope someone can help!

Diggory Laycock · May 10, 2005, 05:34 AM

Not in CSS.

I suppose you could do it in JS - would be horrifically slow though, I'd have thought.

moonmonkey · May 10, 2005, 05:38 AM

Originally Posted by Diggory Laycock

Not in CSS.

I suppose you could do it in JS - would be horrifically slow though, I'd have thought.

I don't want it to animate, just display an image at at 90 degree rotation of the original file.

Any ideas?

registered_user · May 10, 2005, 07:04 AM

If it can be done in javascript, I don't know how to do it.

It can, however, be done server-side with php and GD Library or ImageMagick. If you have access to those technologies, finding a code sample online or even tutorials shouldn't be difficult.

Millennium · May 10, 2005, 07:22 AM

You could also rotate it 90 degrees yourself, using an image editor, and store it as a separate file. This will take up a bit more disk space, but it is the fastest option from the end-user perspective.

The only way I could think of to do this in JavaScript would be to embed the image in a data:// URI, and then perform rotate operations on that. This would get the job done, but it would be extremely slow, and I'm not strong enough with graphics programming to know exactly how it would work. I'm also pretty sure you could only use it for very small pictures, because of the length limitations on URIs.

The point is moot, however, because data:// URIs don't work in IE. Personally, I'd just go for the two-file option myself.

Your other option would be to use the <canvas> tag. I've no clue off the top of my head as to how this works, though, and for now it only works in Safari (though someone has been working on Gecko support for it too).

moonmonkey · May 10, 2005, 07:41 AM

Originally Posted by Millennium

You could also rotate it 90 degrees yourself, using an image editor, and store it as a separate file. This will take up a bit more disk space, but it is the fastest option from the end-user perspective.

The only way I could think of to do this in JavaScript would be to embed the image in a data:// URI, and then perform rotate operations on that. This would get the job done, but it would be extremely slow, and I'm not strong enough with graphics programming to know exactly how it would work. I'm also pretty sure you could only use it for very small pictures, because of the length limitations on URIs.

The point is moot, however, because data:// URIs don't work in IE. Personally, I'd just go for the two-file option myself.

Your other option would be to use the <canvas> tag. I've no clue off the top of my head as to how this works, though, and for now it only works in Safari (though someone has been working on Gecko support for it too).

I only need safari (webkit) support as its for a dashboard widget.
The reason I wanted to use the same image is that there is lots and I don't want to have double the file size.

i will work it out.

Thanks.

registered_user · May 10, 2005, 08:29 AM

A widget? oh geez. I wrote the hula girl widget, and it's got tons of pictures in it. It's not like load time is an issue with a widget.

Millennium · May 10, 2005, 08:35 AM

Originally Posted by moonmonkey

I only need safari (webkit) support as its for a dashboard widget.
The reason I wanted to use the same image is that there is lots and I don't want to have double the file size.

Oh; if it's for a Dashboard widget then you should definitely check out <canvas>. I don't know much about it, but this sounds like the sort of thing that it was made for.

moonmonkey · 06:36 PM

Originally Posted by registered_user

A widget? oh geez. I wrote the hula girl widget, and it's got tons of pictures in it. It's not like load time is an issue with a widget.

Mine is bigger than yours.

Its was actually more the file size, my widget has color options with lots of big graphics so It would mean doubling the file size of the widget.

Its not a big deal, its now 350 k instead of 200 K.

Cheers.

Chuckit · May 10, 2005, 07:03 PM

I second the recommendation for <canvas>. It basically plugs you into CoreGraphics, which allows transforms like this.

moonmonkey · 12:37 AM

Originally Posted by Chuckit

I second the recommendation for <canvas>. It basically plugs you into CoreGraphics, which allows transforms like this.

That sounds like axactly what I need.

Do you know of any good (easy to use) documentation/examples on <canvas>?
I cant find it in the dashboard reference.

EDIT: appartently its all in "Safari JavaScript Reference"

Thanks.

registered_user · May 12, 2005, 02:48 PM

Holy smokes that <canvas> tag is powerful. I feel like Zeus hurling lightning bolts from the top of Mount Olympus.

Now to figure out how to make the rotate take place from the center as opposed to the top left corner.

moonmonkey · May 13, 2005, 02:45 AM

Originally Posted by registered_user

Holy smokes that <canvas> tag is powerful. I feel like Zeus hurling lightning bolts from the top of Mount Olympus.

Now to figure out how to make the rotate take place from the center as opposed to the top left corner.

EEKS! I want the power too!

can you post an example of the rotation?

Chris O'Brien · May 13, 2005, 03:35 AM

Originally Posted by registered_user

Holy smokes that <canvas> tag is powerful. I feel like Zeus hurling lightning bolts from the top of Mount Olympus.

Now to figure out how to make the rotate take place from the center as opposed to the top left corner.

You use translate() to get to the part of the context about which you wish to rotate.

Chris O'Brien · May 13, 2005, 04:18 AM

Oh. To the original question: (when I first seen this I was going to suggest the following, but decided against it since there's no real unified way of doing it cross-platform - then you mentioned widgets).

You can achieve this in CSS. Well, for Internet Explorer only.

Code:
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1)

or something like that - it's been over 4 years since I've written anything for Internet Exploder. I feel quite guilty sometimes, 'cause I miss those filters - you could do some mint stuff with them. Oh well, we have the canvas now which kicks the arse out of it

Anyhoo - the next suggestion was going to be using the canvas - got that one covered.

And finally, despite contrary assertions in this thread, I believe you could indeed do it in JavaScript. It'd be as slow as a crippled snail, but just arrange a matrix of 1px square clippings in the specified manner.

registered_user · May 13, 2005, 06:18 AM

Originally Posted by moonmonkey

EEKS! I want the power too!

can you post an example of the rotation?

here's something I'm tinkering with:
http://roo.clubhouse54.com/hula/canvas/canvas.html

There are two images in that, and also note that canvas and Mac OS draws the drop shadow.

Canvas is crazy cool.

moonmonkey · May 14, 2005, 03:08 AM

Originally Posted by registered_user

here's something I'm tinkering with:
http://roo.clubhouse54.com/hula/canvas/canvas.html

There are two images in that, and also note that canvas and Mac OS draws the drop shadow.

Canvas is crazy cool.

VERY COOL STUFF!