2012-06-29 18 views
13

私のアプリケーションでは、divのボタンに画像があります。画像を回転して画像を保存する方法

jqueryを使用してボタンをクリックしたときに、表示されたイメージを回転して回転イメージを保存したいとします。

私はすでにコードを使用:

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

と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); 
       }); 
      }); 

htmlコード:

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

私は、コードの上に使用する場合は、2枚の画像をそこに持っているが1つは古いイメージで、もう1つは回転イメージです。

ここでは、同じ画像を回転し、回転した画像のみを表示したいと思います。回転した画像をディレクトリに保存します。

jqueryを使用してこれを行うにはどうすればよいですか? もしjqueryでそれができないのなら、私はphp/ajaxを使ってどうすればいいのですか?

+4

JavaScriptを使用してデータを保存することはできません。 AJAXを使用してイメージを保存します。 –

+0

どうすればいいですか? –

+1

この記事を見るhttp://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html –

答えて

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

を見てみましょう:

imagerotate()

そして:

file_put_contents()

+7

実際には、['imagepng()'](http://www.php.net/manual/ja/function .imagepng.php) 'file_put_contents()'ではなく、ファイルを書きます。 – ggutenberg

+0

ありがとうございます。しかし、私はfile_put_contents()を使って回転イメージを保存することはできません。代わりに関数imagejpeg()を使用しました。 – Juljan

+0

file_put_contents()の代わりにimagepng()またはimagejpeg()を使用してください。 – Phuong

10

画像の回転:PNGまたはJPEG、サーバー

に保存したファイルの種類に依存します
// 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); 

それは私のために働く、試してみてください。

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

    ?> 
関連する問題