＆＃34; jQuery旋转＆＃34;插件。将图像旋转并保存到文件中

Question

我正在使用＆＃34; jQuery rotate＆＃34;插件使用此代码旋转我的图像（当我单击按钮时）：

$.post(urlToPHP, {rotation:rotation}, function(data) { 
  var rotation = 0; 
  $("#left").click(function() {
    rotation = (rotation -90) % 360; // the mod 360 probably isn't needed
    $("#spin-pic").rotate(rotation);
  }); 
  $("#right").click(function() {
    rotation = (rotation + 90) % 360; // the mod 360 probably isn't needed
    $("#spin-pic").rotate(rotation);
  }); 
});

我尝试使用下面的php保存旋转的图像，但是没有成功：

<?php 
session_start(); 

$src = $_SESSION['picture'];



if($_SESSION['format'] == "image/png")
{
   $img_r =  imagecreatefrompng($src); 
} 
if($_SESSION['format'] == "image/gif")
{
   $img_r =  imagecreatefromgif($src); 
} 

 if($_SESSION['format'] == "image/jpeg")
  {
   $img_r = imagecreatefromjpeg($src); 
}

  $img_r = imagerotate($img_r, $_POST['rotation'], 0);


    if($_SESSION['format'] == "image/png")
  {
imagepng($img_r, 'upload/' . basename($src));
} 
 if($_SESSION['format'] == "image/gif")
  {
imagegif($img_r, 'upload/' . basename($src));
} 
  if($_SESSION['format'] == "image/jpeg")
  {
imagejpeg($img_r, 'upload/' . basename($src)); //send file to "upload" and overwrites the old picture...
} 



                      **THANK YOU SEAN!!!** 


?>

请查看代码并纠正我。非常感谢:)

Answer 1

1，你需要添加一个＆＃39; save＆＃39;按钮（类似于您的#left / #right），点击后会将rotation发布到您的php代码。

$(function() {                                 
    var rotation = 0;                            
    $("#left").click(function() {
        rotation = (rotation -90) % 360; 
        $("#spin-pic").rotate(rotation);
    });
    $("#right").click(function() {
        rotation = (rotation + 90) % 360;
        $("#spin-pic").rotate(rotation);
    });
    $("#save").click(function() {
        // create a form, and add rotation as an element
        var newForm = $('<form>', {
            'action': 'yourPHPcode.php', // don't know the name of your php code, so used yourPHPcode.php
            'method': 'post'
        }).append($('<input>', {
            'name': 'rotation',
            'value': rotation,
            'type': 'hidden'
        }));
        // add the form to the page, and submit it
        newForm.appendTo('body').submit();
    });
});

然后在你的PHP代码中（不知道你的php代码的名称，所以使用yourPHPcode.php）

<?php 
session_start(); 

$src = $_SESSION['picture'];

if($_SESSION['format'] == "image/png")
{
    $img_r =  imagecreatefrompng($src); 
} 
else if($_SESSION['format'] == "image/gif")
{
    $img_r =  imagecreatefromgif($src); 
} 
else if($_SESSION['format'] == "image/jpeg")
{
    $img_r = imagecreatefromjpeg($src); 
}

if(isset($_POST['rotation'])
{
    $img_r = imagerotate($img_r, $_POST['rotation'], 0);
}


if($_SESSION['format'] == "image/png")
{
    imagepng($img_r, 'upload/' . basename($src));
} 
else if($_SESSION['format'] == "image/gif")
{
    imagegif($img_r, 'upload/' . basename($src));
} 
else if($_SESSION['format'] == "image/jpeg")
{
    imagejpeg($img_r, 'upload/' . basename($src));
} 

header('Location: picture.php');
?>

修改
当php imagerotate()旋转anticlockwise时，您需要将rotation转换为php友好轮换。在$("#save").click(function() {中，您可以创建一个var rotationPHP，您将发送到php

$(function() {                                 
    var rotation = 0;                            
    $("#left").click(function() {
        rotation = (rotation -90) % 360; 
        $("#spin-pic").rotate(rotation);
    });
    $("#right").click(function() {
        rotation = (rotation + 90) % 360;
        $("#spin-pic").rotate(rotation);
    });
    $("#save").click(function() {
        // create a php friendly rotation value
        // left -90 & right 270 == php 90, left -180 & right 180 == php 180, left -270 & right 90 == php 270
        var rotationPHP = (rotation == -90 || rotation == 270) ? 90 : (rotation == -180 || rotation == 180) ? 180 : (rotation == -270 || 90) ? 270: 0;

        // create a form, and add rotation as an element
        var newForm = $('<form>', {
            'action': 'yourPHPcode.php', // don't know the name of your php code, so used yourPHPcode.php
            'method': 'post'
        }).append($('<input>', {
            'name': 'rotation',
            'value': rotationPHP,
            'type': 'hidden'
        }));
        // add the form to the page, and submit it
        newForm.appendTo('body').submit();
    });
});