Rotate the image before uploading to the server

I have a little problem loading images. Sometimes someone uploads photos in the wrong orientation. What I want to do is rotate the images before sending them to my server. Is it possible?

I know I can use a function imagerotate()

from php , but I can use it after the image is loaded.

Is there a way using javascript (or JQuery) to rotate the image and then pass the information to the server via php?

Now I have done something like this:

I am using jQueryRotate.js


<form method="POST" enctype="multipart/form-data">
<input type="file" id="file" name="file">
<div id="preview"></div>
<a href="#" id="counter" class="row"><- counter</a>
    <select id="degree">
<a href="#" id="clockwise" class="row">clockwise -></a>
<button type="submit">save image</button>



$(document).ready(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;}


/* image preview */
    var oFReader = new FileReader();
    oFReader.onload = function (oFREvent) {
        $('#preview').html('<img src="''">');


But I cannot pass the "turn" to download the file, I guess ....

Many thanks!


source to share

1 answer

This is the approach I used:

Allow the user to rotate the image in the browser. As you do this, set the value of the hidden input field at the rotation angle.

Then, when the image is sent to PHP, you can read the rotation field and process the image.



All Articles