Rotate an Image 90° or 180° ?

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

Edit: 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.

Edit: 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