2012-06-29 25 views
13

En mi aplicación tengo una imagen en un div, un botón.Cómo rotar la imagen y guardar la imagen

Quiero rotar la imagen mostrada y guardar la imagen girada cuando hice clic en el botón usando jquery.

ya he utilizado el código:

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

y el código de jQuery: Código

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

html:

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

Cuando i utilizando el código anterior, se han producido dos imágenes una es la imagen anterior y otra es la imagen girada.

Aquí quiero rotar la misma imagen y mostrar solo la imagen girada .Y guardar la imagen girada en el directorio.

¿Cómo puedo hacer esto usando jquery? Si no es posible con jquery, ¿cómo puedo hacerlo con php/ajax?

+4

No puede guardar datos mediante JavaScript. Use AJAX para guardar la imagen. –

+0

¿cómo puedo hacer esto? –

+1

Ver esta publicación http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html –

Respuesta

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

Tome un vistazo a:

imagerotate()

Y:

file_put_contents()

+7

Realmente necesitas usar ['imagepng()'] (http://www.php.net/manual/en/function .imagepng.php) para escribir el archivo, no 'file_put_contents()'. – ggutenberg

+0

Gracias. Pero no puedo guardar imágenes giradas usando file_put_contents(). Usé la función imagejpeg() en su lugar. – Juljan

+0

Utilice imagepng() o imagejpeg() en lugar de file_put_contents(). – Phuong

10

Rotación de la imagen: PNG o JPEG dependen del tipo de archivo con ahorrar en su servidor

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

Me funciona, pruébalo.

2
<?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; 
       } 
     } 

    ?> 
Cuestiones relacionadas