Rotating an image

bootstrap
fontawesome

#1

How could I make this work on a div instead of an image? I have a cropping tool with a div where the image shows up and I want to rotate the image before cropping it.

http://www.ajaxblender.com/article-sources/jquery/image-rotate/index.html


#2

I got the rotate to work but the rotate buttons are beneath the submit button. I want to put the rotate buttons above the submit buttons but then the form submits and serializes the photo before it's been edited. How can I put the rotate buttons above the submit button?






Resize image

    <input type="hidden" name="image-data" class="hidden-image-data" />
    
    <button type="submit">Submit</button>
  </div>
  

</form>
  <button class="rotate-ccw fa fa-rotate-left"></button>
  <button class="rotate-cw fa fa-rotate-right"></button>
<div id="result">
  <code>$form.serialize() =</code>
  <code id="result-data"></code>
</div>

#3

Can you move these lines to above the Submit button?


#4

When the buttons are on top of the submit button the form submits prematurely.


#5

The thing to do then is change it to an input tag type Submit. What is your form action? Same URL or server?


#6

http://plnkr.co/edit/C8m9fPgZmzc49snWL1cL?p=preview


#7

Here is your entire code slightly tweaked. I didn't fork it since I don't have an account.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <form action="">
      <div class="image-editor">
        <input type="file" class="cropit-image-input">
        <input type="hidden" name="image-data" class="hidden-image-data" />
        <div class="cropit-preview"></div>
        <div class="image-size-label">
          Resize image
        </div>
        <input type="range" class="cropit-image-zoom-input">
        <button class="rotate-ccw fa fa-rotate-left"></button>
        <button class="rotate-cw fa fa-rotate-right"></button>
        <input type="submit">
      </div>
    </form>
    <div id="result">
      <code>$form.serialize() =</code>
      <code id="result-data"></code>
    </div>
 
    <script type="text/javascript">

    $(function() {
        $('.image-editor').cropit();
        
        $('form').submit(function() {
          // Move cropped image data to hidden input
          var imageData = $('.image-editor').cropit('export');
          $('.hidden-image-data').val(imageData);

          // Print HTTP request params
          var formValue = $(this).serialize();
          $('#result-data').text(formValue);

          // Prevent the form from actually submitting
          return false;
        });
        
        $('.rotate-cw').click(function() {
          $('.image-editor').cropit('rotateCW');
        });
        $('.rotate-ccw').click(function() {
          $('.image-editor').cropit('rotateCCW');
        });
        
      });
    </script>
  </body>
</html>

The biggest change was in the order the resources load. CSS first.. fa then style, and JS afterward. jQ first, script.js last.

I rearranged the form as well. Hope this helps.


#8

I tried your code but it still submits the form when I rotate the image.


#9

Thanks anyway. Post must be at least 20 characters so this is filler.


#10

Can we see your script.js file, please?


#11

I fixed this problem by adding type=button to the rotate buttons