Rotating an image

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

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>

Can you move these lines to above the Submit button?

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

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

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

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.

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

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

Can we see your script.js file, please?

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

1 Like