Comment faire pivoter une image et l'enregistrer

Question

Dans mon application, j'ai une image dans un div, un bouton.

Je veux faire pivoter l'image affichée et enregistrer l'image pivotée lorsque je clique sur le bouton en utilisant jquery.

J'ai déjà utilisé le code :

http://code.google.com/p/jquery-rotate/

et du code jquery :

$(function() {                                    // doc ready
                var rotation = 0;                             // variable to do rotation with
                $("#img").click(function() {
                    rotation = (rotation + 45) % 360; // the mod 360 probably isn't needed
                    $("#cropbox").rotate(rotation);
                });
            });

code html :

<img src="demo_files/pool.jpg" id="cropbox" />
<input type="button" id="img" name="img" value="click" />

Quand j'utilise le code ci-dessus, il y a deux images, l'une est l'ancienne image et l'autre est l'image tournée.

Ici, je veux faire tourner la même image et n'afficher que l'image tournée, et enregistrer l'image tournée dans un répertoire.

Comment puis-je faire cela en utilisant jquery ? Si ce n'est pas possible avec jquery alors comment puis-je le faire avec php/ajax ?

Answer 1

//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");

Jetez un coup d'oeil :

imagerotate()

Et :

file_put_contents()

Answer 2

Rotation de l'image : PNG ou JPEG selon le type de fichier avec sauvegarde sur votre serveur.

// 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);

Ça marche pour moi, essayez.

Answer 3

<?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 4

Il aidera à faire pivoter une image et à enregistrer l'image dans n'importe quel angle de l'image. par exemple, nous avons fait pivoter l'image à 180 degrés. nous pouvons enregistrer cette image (180 degrés) dans notre dossier. ici, nous avons utilisé canvas. il est utile pour les développeurs ASP.NET.

<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 5

Vous pouvez essayer ma solution pour faire pivoter l'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();
}
?>