Rotate an Image 90° or 180° ?

[Traveler]

I'm looking around for any script that will take a .jpg or .gif image and turn it
(rotate it) 90 or 180° by single-clicking on the image.

Does such code exist that can be included in the <img src. . . > tag itself
Like <img src="myimage.jpg" onClick . . . > ?

[jscheuer1]

Not really. This:

http://www.walterzorn.com/rotate_img/rotate_img.htm

perhaps comes closest. Be sure to read the warnings.

Something like that might be able to be worked out in Flash. But it wouldn't be an onclick event of the img tag, it could probably be an onclick event of the Flash object. But, I'm not 100% sure this can be done in Flash either, just that it might be possible.

On the other hand, if you already had the 90 and 180 degree views as separate image files, a simple image swap could be done onclick in javascript.

[djr33]

You could play with negative height/widths :p

[jscheuer1]

You could play with negative height/widths :p

Are you serious? The smiley would seem to indicate, no.

[djr33]

Hey, it works logically and in programs like photoshop. I seriously doubt it would work in browsers, though, (I haven't tried it), and certainly wouldn't be reliable. But might be fun! Now I must try it.


Edit: Conclusion: nevermind. The best you can do is get the image to not display at all using a negative width. Height seems to do nothing. How sad. I protest!!! HTML 5 SHALL INCLUDE THIS I SAY! (Don't mind me, I'll be on my way now...) :p

[BLiZZaRD]

You can do it in Flash, this I know. Which leads me to believe you can also do it with JS. Not sure exactly how at the moment, but perhaps I will work on something.

Hmm.. off to ponder...

[jscheuer1]

If you can do it in Flash, I would think it would because of Flash's ability to manipulate images with minimal drain on the CPU is greater than javascript's. In javascript (as far as I know), the math involved would put even the fastest processor into a catatonic state.

[BLiZZaRD]

Well, no one said it would be easy.... LOL

My meaning is that AS and JS are virtually the same. Coding in one is very similar to the other (but why I can master AS and not grasp JS is beyond me.. but I am trying to teach myself JS.. it's coming along...

Perhaps there is a little trick to it we haven't thought of yet.. I may just uncover that... Yay me :)

[djr33]

Despite any similarities in the languages, the properties simply differ. There's no "movie clip" object in JS, as a basic example.

However, I'm not fully convinced it isn't possible. I'd think that backwards or upside down would in fact be possible. But not odd angles (like 45 degrees)

[jscheuer1]

There is an IE only way:


style="filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);"

But this doesn't rotate in real time, just shows the image rotated 180 degrees (use rotation=1 for 90, 3 for 270). You can script this, but it would be an abrupt transition. Filters only work in IE 5.5 and up, this particular one may have come along later. They don't work in any other browsers.

I seem to remember now a cross browser script that put a faded 'reflection' beneath an image, not sure though, I'll have a look for it.

[jscheuer1]

This might be adaptable:

http://cow.neondragon.net/stuff/reflection/

[BLiZZaRD]

Currently I am looking from scratch. I am thinking I can do some simple math here. maybe a bit of sin() and rounding to grab the current top/left x/y on click and on release use the math to change the bottom/right x/y co-ord to the new co-ords top/left. In essence this would just move the image up and over, but if I also set new x/y for the top/left to be bottom/right (swapping the co-ords in a sence) the image should "rotate"...

still working on the math at the moment though

[BYK]

You can use coordinate system transformation techniques for this I think.
If you calculate each pixel's distance from a defined origin (the simplest is sqrt(x^2 + y^2)), and get the angle of the line joining the pixel and the origin (the simplest would be arctan(y/x), and then add the rotation angle to this calculated angle and recalculate the new x&y coordinates by simply multiplying the distance of the pixel with sin(teta) for y and cos(teta) for x axis(where teta stands for the new angle we have just calculated), it should be done. Without any anti-aliasing and etc. of course :)

Edit: I found a library at http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm for purposes like these and also I have learnt a "canvas" tag for FF, digging it :)

[jscheuer1]

Zorn himself doesn't recommend using his method for rotating images.

[BYK]

May be it can be possible this canvas tag. The "image reflection" script seems good and now I'm examining it.

It uses IE's filters for the reflection effect but the canvas tag for Fx and others.

[BLiZZaRD]

well, the obvious answer is multiple images loaded onClick... but where is the fun in that?

[jscheuer1]

well, the obvious answer is multiple images loaded onClick... but where is the fun in that?

That's one of the first things I mentioned. That could be impractical if there are many images that need this treatment.

[BLiZZaRD]

Yes I noted that suggestion of yours, which spawned my interest in finding a way to do this. I am thinking. It is a fun little distraction project for me while I am here at work :)

[jscheuer1]

I got a Beta version working:

http://home.comcast.net/~jscheuer1/side/flip.htm

Opera appears to soften the image as well as flip it, FF seems to shift its vertical by 1px, cutting off a 1px piece when flipped. IE 7 and Safari 3 Win seem 'perfect'. IE 5.5 might have problems or throw an error.

Usage is simple:

onclick="flip(this);"

A unique id is required, and if you want to style the image, use the stylesheet so that the styles will carry over in non-IE browsers.

[BYK]

Seems good&working but unfortunately we cannot rotate to an arbitrary angle.
By the way were you aware of the "canvas" tag before? I saw it in that reflection script for the first time since I'm developing JS&DHTML codes for some time.

[jscheuer1]

The canvas tag is incredibly versatile, but the IE DXImageTransform.Microsoft.BasicImage filter isn't, at least not in the same way. They were meant for two almost entirely different purposes. With canvas and a good working knowledge of math and geometry, just about any type of angular, and/or scaling, and/or certain effects are possible, but it was meant primarily for drawing. With BasicImage, the effects are more straightforward, requiring less math, but are more limited I think. There are other filters for other effects. Angular rotation might be possible, I haven't researched it enough to know for sure yet.

Oh, Oh, the IE progid:DXImageTransform.Microsoft.Matrix filter can do rotations in 1 degree increments.

[BLiZZaRD]

Well, you beat me to it John. I guess I can knock that one off my challenge-to-do list :)

But at least I stood by my word that JS could do it ;)

[jscheuer1]

Well, you beat me to it John. I guess I can knock that one off my challenge-to-do list :)

But at least I stood by my word that JS could do it ;)

Yep, I won the race, but lost the argument. Anyways, I found a fudge to fix the ugly way FF does this. It distorts the image slightly (stretches it by 1px vertically), but is preferable in most cases to having a noticeable 1px slice of the image removed (addition red):


context.drawImage(im, 0, 0, c.width, c.height+1);

This also distorts the image slightly in Opera & Safari, but the trade-off may be worth it. I'm thinking there must be a better way though, I'll keep looking for a bit, the canvas tag is very complex.

Perhaps starting with the canvas 1px too sort might do it.

Nope, just tried it, no good, it changes the layout height of the canvas, doh!

[BLiZZaRD]

Job well done, as always John. Bravo

[megala]

Hi John

i have tested your code for flip, it works great. I also need to do it for left right rotation. I ahve managed to chaneg the script so that it can rotate left right, it works on IE but doesnt in firefox. IN firefox it still flip top bottom.

I changed it to
im.style.filter+='progid:DXImageTransform.Microsoft.BasicImage(mirror=1)';
}
else{

im.filters[flip[im.id]].mirror=im.filters[flip[im.id]].mirror==1? 0 : 1;
}

I believe the if else is refering to different browser option. Sorry if i got it wrong. Is there anyway i can make it flip left right as the Microsoft.BasicImage(mirror=1) only workd for IE.

I am all lost on this server side image rotation and flipping.
Thanks