Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: turn a picture

  1. #1
    Senior Coder
    Join Date
    May 2004
    Posts
    1,466
    Thanks
    15
    Thanked 0 Times in 0 Posts

    turn a picture

    using javascript (or ajax) is there a way I can turn a picture 360.
    I want to put this option in my image gallery?

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You are in luck because Javascript is only capable of rotating images by 360 degrees and multiples thereof. The Javascript code you need to do that is:

    <script type="text/javascript"></script>

    Javascript is unable to rotate images by any other amount. The only way that you can give the appearance of rotating an image by other amounts using Javascript is to have one large image that is made up of smaller images showing the same object with different rotations and only show a cropped version of the image that displays the object with the required rotation. You can then change the rotation by using Javascript to update the CSS that defines what part of the big image is displayed by changing the cropping so that the new rotation is the part of the big image that shows.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I found this

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

    Looks kind of buggy to me and at a glance I don't really understand how it is achieving the results it gets.

    david_kw

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    It does it the way I suggested by your having one huge image that contains a whole lot of smaller images of the same thing with different rotations and then changing which part of the large image actually displays so as to display that part wich shows the small image with the desired rotation.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually it looks like it is creating divs for each pixel in the graphic then drawing the graphic for each div using the Math package to determine where that pixel should be based on a degree rotation and using styles for clipping to only show that one pixel in the right spot.

    I think your idea would be better.

    david_kw

  • #6
    Senior Coder
    Join Date
    Sep 2005
    Posts
    1,791
    Thanks
    5
    Thanked 36 Times in 35 Posts
    there's no big image, just the regular one but the principle is similar.
    It seems to work creating as many copies of the image as there are pixels in the image, and offsetting each one so that it effectively shows a pixel. It then positions these single-pixel 'windows' in such a way that it appears the image is rotated.

    It's quite clever in my opinion, and the maths behind it is pretty complicated, but I can't really see it being practical, as it's quite slow, even on the small test images.

    [edit]someone can type faster than me!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •