rotate using jquery

by lovromar

HTML

<script src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<form method="POST" enctype="multipart/form-data">
    <input type="file" id="file">
    <div id="preview"></div>
    <br>
    <a href="#" id="counter"><- counter</a>
        <select id="degree">
            <option>90</option>
            <option>45</option>
        </select>
    <a href="#" id="clockwise">clockwise -></a>
    <hr>
    <button type="submit">save image</button>
</form>

CSS

#preview img {
    max-height: 300px;
    max-width: 300px;
}

JavaScript

$('a').click(function(){
    var a = $('img').getRotateAngle();
    var d = Math.abs($('#degree').val());
    
    if($(this).attr('id') == 'counter'){
       //d = -Math.abs(+a - +d);
        d = a - d;
    }
    else{d = +a + +d;}
   
    $('img').rotate({animateTo:d});
});

/* image preview */
$('#file').change(function(){
    var oFReader = new FileReader();
    oFReader.readAsDataURL(this.files[0]);
    console.log(this.files[0]);
    oFReader.onload = function (oFREvent) {
        $('#preview').html('<img src="'+oFREvent.target.result+'">');
    };
});