Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > How to rotate the image

Reply
Thread Tools

How to rotate the image

 
 
santel_helvis@sify.com
Guest
Posts: n/a
 
      12-28-2005
Hi All,

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

 
Reply With Quote
 
 
 
 
bwucke@gmail.com
Guest
Posts: n/a
 
      12-28-2005
http://www.kurs.horsesport.pl/inne/rv.html
Just to annoy PointedEars.

 
Reply With Quote
 
 
 
 
bwucke@gmail.com
Guest
Posts: n/a
 
      12-28-2005

http://www.velocityreviews.com/forums/(E-Mail Removed) 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.

 
Reply With Quote
 
Joaquin Cuenca Abela
Guest
Posts: n/a
 
      12-28-2005
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,

 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      12-28-2005
(E-Mail Removed) wrote:

> (E-Mail Removed) 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
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      12-28-2005
(E-Mail Removed) 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
 
Reply With Quote
 
bwucke@gmail.com
Guest
Posts: n/a
 
      12-28-2005

Thomas 'PointedEars' Lahn wrote:
> (E-Mail Removed) wrote:
>
> > (E-Mail Removed) 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

> > 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?

 
Reply With Quote
 
cwdjrxyz@yahoo.com
Guest
Posts: n/a
 
      12-28-2005

Thomas 'PointedEars' Lahn wrote:
> (E-Mail Removed) 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.

 
Reply With Quote
 
cwdjrxyz@yahoo.com
Guest
Posts: n/a
 
      12-29-2005

(E-Mail Removed) wrote:
> Thomas 'PointedEars' Lahn wrote:
> > (E-Mail Removed) 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.

 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      12-29-2005
(E-Mail Removed) 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
how to rotate image so that image is perfectly level bucky3 Digital Photography 11 07-15-2009 08:59 AM
PIL rotate : Rotate By Shear / Paeth Rotation? IanJSparks Python 0 01-10-2008 04:50 PM
Rotate the graphics without rotate the text in SVG RC XML 1 08-03-2006 07:45 AM
Tool to right click image in windows explorer and rotate image right or left 90 degrees siliconpi Digital Photography 2 11-29-2004 12:56 PM



Advertisments