Rotate image horizontally onClick

Question

This works vertically but I am trying to rotate horizontally by clicking on the image. Can not figure this out! Or there might be an easier way of doing this as well.

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flip Image</title>
        <style>
            canvas{border:1px solid #333}
            img{display:none;}
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">      </script>
        <script type="text/javascript">
            $(window).load(function(){

                var immagine = $('img')[0]
                alt=immagine.height
                lar=immagine.width
                $('<canvas width="'+lar+'" height="'+alt+'"></canvas>').appendTo('body')
                var ca=$('canvas').get(0)
                ctx=ca.getContext('2d')
                ctx.drawImage(immagine, 0, 0);

                $('canvas').click(function(){
                    ctx.translate(lar-1, alt-1);
                    ctx.rotate(Math.PI);
                    ctx.drawImage(immagine, 0, 0, lar, alt);
                 })

            })
        </script>
    </head>
    <body>
        <!-- onclick rotate image horizontally-->
        <img src="myimage.jpg">

        <br><Br>

    </body>
</html>

Thanks!

This might help http://stackoverflow.com/questions/968642/rotate-image-clockwise-or-anticlockwise-inside-a-div-using-javascript — user2728841, Mar 04 '14 at 15:04

Rajesh Dhiman · Answer 1 · 2014-03-06T18:38:51.640

1

You can rotate image to any angle by just a simple mathematical logic. For example if you want to rotate image to 90 degree. Just use:

ctx.rotate(90 * Math.PI/180);

You can set your desired angle in above code and rotate image.

UPDATE I am adding some code according to your needs. that works on canvas click and this will rotate image in one direction.

var angleInDegrees=0;

$('canvas').click(function(){
   angleInDegrees+=90;
    drawRotated(angleInDegrees);
 })
function drawRotated(degrees){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    ctx.translate(canvas.width/2,canvas.height/2);
    ctx.rotate(degrees*Math.PI/180);
    ctx.drawImage(image,-image.width/2,-image.width/2);
    ctx.restore();
}

edited Mar 06 '14 at 18:38

answered Mar 04 '14 at 15:26

Rajesh Dhiman

1,888
1
17
30

Does this made any change in rotation ? What angle did you tried ? – Rajesh Dhiman Mar 04 '14 at 15:48
No change at all, can you show an example of what you are saying? Thanks – Andre Mar 04 '14 at 16:03
ok, When we are doing `ctx.rotate(90 * Math.PI/180);`, This means you are trying to rotate image to 90 degree. If you want to change the angle say 170 degree. You can do that by `ctx.rotate(170 * Math.PI/180);`. If this thing doesn't works try changing cordinates in `ctx.translate(lar-1, alt-1);` to something else and then rotate. – Rajesh Dhiman Mar 04 '14 at 16:06
Check out [this](http://stackoverflow.com/questions/17125632/html5-canvas-rotate-object-without-moving-coordinates) question for more info. – Rajesh Dhiman Mar 04 '14 at 16:10
I did that, I notice something moving on the background when I click on it, but the main image doesn't move. – Andre Mar 04 '14 at 16:11
This is interesting, but I can't use buttons, it has to be an onClick on the image. – Andre Mar 06 '14 at 18:15

score 0 · Answer 2 · answered Mar 04 '14 at 16:08

0

I agree to Rajesh's comment, you can set your angle and that will rotate according to the translation performed prior to that. I'd prefer using webkit over canvas sometimes. Here is a fiddle that does the rotation horizontally using CSS webkit, it's much simpler in my opinion. Horizontal Rotation Using Webkit

.rotate  img{
-webkit-transform: rotateY(180deg);   
-webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;
z-index: -2; }

answered Mar 04 '14 at 16:08

XNull

15
7

But that is not what I am looking for, I have an image displaying vertically, I would like to click on it and have it displayed horizontally instead. – Andre Mar 04 '14 at 16:24
Well, I confused that for flipping in respect to the y-axis. Then you can just use `-webkit-transform: rotate(90deg);` without the Y. [Check the updated jsfiddle](http://jsfiddle.net/youssefselim/8SV8T/3/) – XNull Mar 04 '14 at 16:38
Than there is browser compatibilities issues, it does work in Firefox. – Andre Mar 04 '14 at 19:30
Just make sure you add -moz-transform, -ms-transform, -o-transform & transform with same value for each. It's much more reliable and has better responsiveness. – XNull Mar 05 '14 at 01:00

score 0 · Answer 3 · answered Oct 16 '15 at 16:48

check that jsfiddle may it help

.imageRotateHorizontal{
    -moz-animation: spinHorizontal .8s infinite linear;
    -o-animation: spinHorizontal .8s infinite linear;    
    -webkit-animation: spinHorizontal .8s infinite linear;
    animation: spinHorizontal .8s infinite linear;
}

@keyframes spinHorizontal {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

http://jsfiddle.net/AB277/7/

Rotate image horizontally onClick

3 Answers3