How to rotate the image

[santel_helvis]

Hi All,

Could anyone tell me how to rotate the image in javascript. Which
concepts I should concentrate to rotate the image

[bwucke]

http://www.kurs.horsesport.pl/inne/rv.html
Just to annoy PointedEars.

[bwucke]

sa***********@s ify.com napisal(a):

Hi All,

Could anyone tell me how to rotate the image in javascript. Which
concepts I should concentrate to rotate the image

Okay, okay, I was cheating. That wasn't really rotation, just flipping.
Here you go, real rotation:
http://www.kurs.horsesport.pl/inne/rv2.html
Passed both Validator and Jigsaw, but tested only in FF1.5, don't have
anything else handy. You need to click "continue running script" when
prompted, then wait some...
Adding size detection and edge clipping left as an exercise to the
reader.

Seriously: I don't think there's any simple way to do what you want to
do. Most likely you need to get a base64-encoded image, decode it to an
array of integers/floats, process them according to the rules of given
image format to get a "bitmap" array, then pass them through the
rotation equations attached, reencode them back to GIF/JPG/whatever,
reencode them to base64, transform to a data: URI then hand the URI
over to an IMG tag. All in Javascript. Good luck writing JPEG
decompressor in Javascript. And of course it won't work in MSIE because
it has 256-char limit on all URIs.
In short: impossible.

[Joaquin Cuenca Abela]

except if you use the new canvas and svg. This way it should work in
firefox (both), safari (canvas only) and Opera (svg only).

IE also has enough activex at its disposal to rotate an image.

Cheers,

[Thomas 'PointedEars' Lahn]

bw****@gmail.co m wrote:

sa***********@s ify.com napisal(a):

Could anyone tell me how to rotate the image in javascript. Which
concepts I should concentrate to rotate the image
Okay, okay, I was cheating. That wasn't really rotation, just flipping.
Here you go, real rotation:
http://www.kurs.horsesport.pl/inne/rv2.html
Passed both Validator and Jigsaw, but tested only in FF1.5, [...]

It takes more than a minute to be displayed by my Firefox 1.5 and locks
it afterwards.
You need to click "continue running script" when prompted, then wait
some...

Obviously the author of that HTML document does not have any clue.
PointedEars

[Thomas 'PointedEars' Lahn]

sa***********@s ify.com wrote:

Could anyone tell me how to rotate the image in javascript.
You cannot do with JavaScript (or any other client-side applied
programming language in a UA environment) what you cannot do with
the UA. Rule of thumb: if the DOM of the UA does not provide the
means, JavaScript cannot provide it.
Which concepts I should concentrate to rotate the image

HTML DOMs, image filters (IE/Win only, 90° steps only AFAIK), and
your favorite image editor. SVG and the SVG DOMs if you want to
support them.
PointedEars

[bwucke]

Thomas 'PointedEars' Lahn wrote:

bw****@gmail.co m wrote:

sa***********@s ify.com napisal(a):

Could anyone tell me how to rotate the image in javascript. Which
concepts I should concentrate to rotate the image

Okay, okay, I was cheating. That wasn't really rotation, just flipping.
Here you go, real rotation:
http://www.kurs.horsesport.pl/inne/rv2.html
Passed both Validator and Jigsaw, but tested only in FF1.5, [...]

It takes more than a minute to be displayed by my Firefox 1.5 and locks
it afterwards.

What did you expect with 10.000 DIVs acting as pixels? Get a faster
computer :P

You need to click "continue running script" when prompted, then wait
some...

Obviously the author of that HTML document does not have any clue.

The question was about rotating the image in Javascript. The script is
a correct answer, no matter how much you don't like it. Of course there
are better methods to rotate an image NOT using Javascript, or using
Javascript just in a support role, doing only some parameters passing
between modules of the browser. This one here performs actual rotation
in JS and uses an ugly, slow hack to display the result.

Suggest a faster, more efficient method of rotating an image in
Javascript. Feel free to use CSS, but don't use experimental features
like Canvas, SVG or non-standard or external ActiveX, Java etc.

Could anyone tell me how to rotate the image in javascript.

You cannot do with JavaScript (or any other client-side applied
programming language in a UA environment) what you cannot do with
the UA

But I just did.
Javascript is Turing-complete. That means. given required input and
output techniques, plus enough resources you can do EVERYTHING in it.
Some things are just harder than others, often because of I/O
shortcomings.
Someone talking about clue?

[cwdjrxyz]

Thomas 'PointedEars' Lahn wrote:

sa***********@s ify.com wrote:

Could anyone tell me how to rotate the image in javascript.

You cannot do with JavaScript (or any other client-side applied
programming language in a UA environment) what you cannot do with
the UA. Rule of thumb: if the DOM of the UA does not provide the
means, JavaScript cannot provide it.

Which concepts I should concentrate to rotate the image

HTML DOMs, image filters (IE/Win only, 90° steps only AFAIK), and
your favorite image editor. SVG and the SVG DOMs if you want to
support them.

Indeed IE filters will work to rotate images along with text in a
division, at least in multiples of 90 degrees. See
http://elouai.com/javascript/javascr...age-rotate.php . You can test
their example on their page or download the code. Their test image is
quite small and simple. I have not tested this method on a large, very
detailed color image. Of course you will need a recent IE browser that
handles filters for this method to work.

[cwdjrxyz]

cw******@yahoo. com wrote:

Thomas 'PointedEars' Lahn wrote:

sa***********@s ify.com wrote:

Could anyone tell me how to rotate the image in javascript.

You cannot do with JavaScript (or any other client-side applied
programming language in a UA environment) what you cannot do with
the UA. Rule of thumb: if the DOM of the UA does not provide the
means, JavaScript cannot provide it.

Which concepts I should concentrate to rotate the image

HTML DOMs, image filters (IE/Win only, 90° steps only AFAIK), and
your favorite image editor. SVG and the SVG DOMs if you want to
support them.

Indeed IE filters will work to rotate images along with text in a
division, at least in multiples of 90 degrees. See
http://elouai.com/javascript/javascr...age-rotate.php . You can test
their example on their page or download the code. Their test image is
quite small and simple. I have not tested this method on a large, very
detailed color image. Of course you will need a recent IE browser that
handles filters for this method to work.

I have put up a page at http://www.cwdjr.info/test/rotateimages.html .
I added just enough code to clean up to html 4.01 transitional. I added
a Microsoft conditional around all of the buttons so that the controls
only show on browsers for which they are likely to work(recent IE and
close relatives such as MSN 9). I used a fair sized image of about 42
KB. The response to the buttons is rapid. In addition to rotation by
multiples of 90 degrees, a morror image also can be produced. Most of
the script is hidden in the IE built-in filters. The only script you
have to write is in connection with the targets for the various
buttons.

There is another method to rotate your images by 180 degrees, but I do
not remember the details. About 2 years ago in a discussion group, a
lady described a problem that suddenly developed so that all images
displayed upside down on her monitor. There was much discussion about
monitor adjustments, but that did not help. It turned out that the
lady's children had been playing with the computer. There is some
obscure menu somewhere in the Windows OS that allows images to be
displayed rotated by 180 degrees. Her children apparently found out
about this from other children at school, and decided to have some fun
with their mother.

[Thomas 'PointedEars' Lahn]

cw******@yahoo. com wrote:

I have put up a page at http://www.cwdjr.info/test/rotateimages.html .
I added just enough code to clean up to html 4.01 transitional.
You should add the system identifier not to trigger Compatibility Mode.
And you can make that HTML 4.01 Strict, from what I can see and what the
W3C Validator tells me, that would be Valid, too.
I added a Microsoft conditional around all of the buttons so that the
controls only show on browsers for which they are likely to work (recent
IE and close relatives such as MSN 9).
Yes, they are not shown in my Firefox 1.5 or Opera 8.5.
I used a fair sized image of about 42 KB. The response to the buttons is
rapid. In addition to rotation by multiples of 90 degrees, a morror image
also can be produced. Most of the script is hidden in the IE built-in
filters. The only script you have to write is in connection with the
targets for the various buttons.
But it is probably not necessary and makes less sense to refer to the `div'
element. Filters can be applied directly to the `img' element. At least
that worked for me with IE 4.0 filters ever since; I do not use DirectX
filters for backwards compatibility.

Referring to the `img' element would also allow you to refrain from using
the IE-proprietary referencing and use document.images['myimg'] instead,
provided that you gave the `img' the name `myimg'.
[...] There is some obscure menu somewhere in the Windows OS that allows
images to be displayed rotated by 180 degrees. Her children apparently
found out about this from other children at school, and decided to have
some fun with their mother.

:)
PointedEars