How to rotate image and save the image

Question

In my application i have an image in a div,a button.

I want to rotate the image displayed and save the rotated image when i clicked on the button using jquery.

Answer 1

it will helps to rotate an image and save the image in whatever the angle image has. for example we rotated image into 180 degrees .we can save that image (180 degrees) into our folder.here we used canvas.it helps for ASP.NET developers

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" id="CLoseToggle" onclick="CloseModal()">&times;</button>
                <h4 class="modal-title">Image Preview</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 cr-img-box">
                        <asp:Image ID="CropImg" ImageUrl="" runat="server" class="north"/>
                        <canvas id="canvas"></canvas>
                        <input type="hidden" id="hfData" runat="server"/>
                        <input type="hidden" id="hdnCropImageFileLocation"/>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <div style="text-align: center;">
                    <input type="button" id="btnRotate" class="btn btn-sm btn-info" value="Rotate"/>
                    <asp:Button ID="OKFinalSave" class="btn btn-sm btn-info" Text="Submit" runat="server"
                                OnClick="OKFinalSave_Click"/>
                </div>
            </div>

        </div>

    </div>
</div>

protected void OKFinalSave_Click(object sender, EventArgs e)
{

    string
    CropImageLocation = ConfigurationManager.AppSettings["CropFileLocation"].ToString();
    CropImageLocation = CropImageLocation + DateTime.Now.ToString("yyyyMMdd") + "\\" + LoanNumber.Value;
    string
    a = CropImageLocation + "\\" + LoanNumber.Value + "_SIGN";
    string
    base64String = hfData.Value.Replace("data:image/png;base64,", string.Empty);
    byte[]
    bytes = Convert.FromBase64String(base64String);
    string
    filePath = a;

    if (!Directory.Exists(CropImageLocation)) {
        Directory.CreateDirectory(CropImageLocation);
    }
    if (File.Exists(a)) {
        File.Delete(CropImageLocation + "\\" + LoanNumber.Value + "_SIGN");

    }

    System.IO.File.WriteAllBytes(CropImageLocation + "\\" + LoanNumber.Value + "_SIGN.jpeg", bytes);
    SaveCropedPath(LoanNumber.Value, CropImageLocation + "\\" + LoanNumber.Value + "_SIGN.jpeg");
}


<script type = "text/javascript" >
var img = null, canvas = null;
$(function () {
    $("#canvas").css("display", "none");
    img = document.getElementById('CropImg');
    canvas = document.getElementById('canvas');
    if (!canvas || !canvas.getContext) {
        canvas.parentNode.removeChild(canvas);
    } else {
        //img.style.position = 'absolute';
        //img.style.visibility = 'hidden';
    }
    RotateImage(0);
    $('#btnRotate').click(function () {
        $("#CropImg").css("display", "none");
        $("#canvas").css("display", "block");
        if (img.className == "north") {
            RotateImage(90);
            img.className = "west";
        } else if (img.className == "west") {
            RotateImage(180);
            img.className = "south";
        } else if (img.className == "south") {
            RotateImage(270);
            img.className = "east";
        } else if (img.className == "east") {
            RotateImage(0);
            img.className = "north";
        }
    });
});

function RotateImage(degree) {
    if (document.getElementById('canvas')) {
        var context = canvas.getContext('2d');
        var cw = img.width, ch = img.height, cx = 0, cy = 0;
        switch (degree) {
            case 90:
                cw = img.height;
                ch = img.width;
                cy = img.height * (-1);
                break;
            case 180:
                cx = img.width * (-1);
                cy = img.height * (-1);
                break;
            case 270:
                cw = img.height;
                ch = img.width;
                cx = img.width * (-1);
                break;
        }
        canvas.setAttribute('width', cw);
        canvas.setAttribute('height', ch);
        context.rotate(degree * Math.PI / 180);
        context.drawImage(img, cx, cy);
        document.getElementById('hfData').value = canvas.toDataURL();
    } else {
        switch (degree) {
            case 0:
                image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
                break;
            case 90:
                image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
                break;
            case 180:
                image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
                break;
            case 270:
                image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
                break;
        }
    }
}

</script>

Answer 2

Image rotation: PNG or JPEG depend on file type with save on your server

// File and rotation
$rotateFilename = '/var/www/your_image.image_type'; // PATH
$degrees = 90;
$fileType = strtolower(substr('your_image.image_type', strrpos('your_image.image_type', '.') + 1));

if($fileType == 'png'){
   header('Content-type: image/png');
   $source = imagecreatefrompng($rotateFilename);
   $bgColor = imagecolorallocatealpha($source, 255, 255, 255, 127);
   // Rotate
   $rotate = imagerotate($source, $degrees, $bgColor);
   imagesavealpha($rotate, true);
   imagepng($rotate,$rotateFilename);

}

if($fileType == 'jpg' || $fileType == 'jpeg'){
   header('Content-type: image/jpeg');
   $source = imagecreatefromjpeg($rotateFilename);
   // Rotate
   $rotate = imagerotate($source, $degrees, 0);
   imagejpeg($rotate,$rotateFilename);
}

// Free the memory
imagedestroy($source);
imagedestroy($rotate);

It's works for me, try it.

Answer 3

//define image path
$filename="image.jpg";

// Load the image
$source = imagecreatefromjpeg($filename);

// Rotate
$rotate = imagerotate($source, $degrees, 0);

//and save it on your server...
imagejpeg($rotate, "myNEWimage.jpg");

Take a look at:

imagerotate()

And:

file_put_contents()

Answer 4

<?php //image rotate code here 
         if(isset($_POST['save']))
         {
             $degrees=90;

             $new_file=$sourceName;
             $filename ="http://localhost/dostoom/files_user/1000/4/153.jpg";
             $rotang = $degrees;
             list($width, $height, $type, $attr) = getimagesize($filename);
              $size = getimagesize($filename);
              switch($size['mime'])
              {
                 case 'image/jpeg':
                                     $source =
         imagecreatefromjpeg($filename);
                                     $bgColor=imageColorAllocateAlpha($source, 0, 0,
         0, 0);
                                     $rotation = imagerotate($source,
         $rotang,$bgColor);
                                     imagealphablending($rotation, false);
                                     imagesavealpha($rotation, true);
                                     imagecreate($width,$height);
                                     imagejpeg($rotation,$new_file);
                                     chmod($filename, 0777);
                 break;
                 case 'image/png':

                                     $source =
         imagecreatefrompng($filename);
                                     $bgColor=imageColorAllocateAlpha($source, 0, 0,
         0, 0);
                                     $rotation = imagerotate($source,
         $rotang,$bgColor);
                                     imagealphablending($rotation, false);
                                     imagesavealpha($rotation, true);
                                     imagecreate($width,$height);
                                     imagepng($rotation,$new_file);
                                     chmod($filename, 0777);
                 break;
                 case 'image/gif':

                                     $source =
         imagecreatefromgif($filename);
                                     $bgColor=imageColorAllocateAlpha($source, 0, 0,
         0, 0);
                                     $rotation = imagerotate($source,
         $rotang,$bgColor);
                                     imagealphablending($rotation, false);
                                     imagesavealpha($rotation, true);
                                     imagecreate($width,$height);
                                     imagegif($rotation,$new_file);
                                     chmod($filename, 0777);
                 break;
                 case 'image/vnd.wap.wbmp':
                                     $source =
         imagecreatefromwbmp($filename);
                                     $bgColor=imageColorAllocateAlpha($source, 0, 0,
         0, 0);
                                     $rotation = imagerotate($source,
         $rotang,$bgColor);
                                     imagealphablending($rotation, false);
                                     imagesavealpha($rotation, true);
                                     imagecreate($width,$height);
                                     imagewbmp($rotation,$new_file);
                                     chmod($filename, 0777);
                 break;
              }
         }

    ?>

Answer 5

You can try my solution to rotate the image

<?php

ob_start();

// Content type
header('Content-type: image/jpeg');

class RotateImage {
    private $_path;
    private $_degrees;

    public function __construct($path, $degrees){
        $this->_path = $path;
        $this->_degrees = $degrees;
    }

    public function rotate() {
        $image = new Imagick($this->_path);
        $image->rotateimage('black', $this->_degrees);
        echo $image->getImageBlob();
        exit();
    }


}



if($_SERVER['REQUEST_METHOD'] == 'GET'){
    $sourceImagePath = isset($_GET['image_path']) ? $_GET['image_path'] : null;
    $degrees = isset($_GET['degrees']) ? $_GET['degrees'] : 90;

    $obj = new RotateImage($sourceImagePath, $degrees);
    return $obj->rotate();
}
?>