Question

在我的应用程序中，我有一个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" />

当我使用上面的代码时，有两个图像，一个是旧图像，另一个是旋转图像。

这里我想旋转相同的图像并仅显示旋转的图像。并将旋转的图像保存在目录中。

如何使用jquery执行此操作？如果使用jquery是不可能的，那么我怎样才能用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");

看看：

imagerotate()

和

file_put_contents()

Answer 2

图像旋转：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'){
   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);

这对我有用，试一试。

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

您可以尝试使用我的解决方案来旋转图像

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

Answer 5

它将有助于旋转图像并以任意角度保存图像。例如，我们将图片旋转了180度。我们可以将图片（180度）保存到我们的文件夹中。在这里，我们使用canvas.it对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 6

基于 nagarjun daram 使用图像和画布的唯一 Javascript 解决方案。

适用于数据 URL，完整的工作示例： https://jsfiddle.net/f8d46umz/7/

请注意，交叉原点图像可能不起作用，至少在小提琴上是这样。

主要轮换代码：

function rotateDegrees(degrees, imgSrc, callback){
  var canvasElement = document.getElementById('canvas'); //or create
  if (!canvasElement || !canvasElement.getContext) {
    return showUnsupported();
  }
  //We use an additional img to get the sizes
  var img = document.getElementById('tmpImg'); //or create
  img.onload = function(){
      var cw = img.width,
        ch = img.height,
        cx = 0,
        cy = 0;
      switch (degrees) {
        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;
      }
      var context = canvas.getContext('2d');
      canvas.setAttribute('width', cw);
      canvas.setAttribute('height', ch);
      context.rotate(degrees * Math.PI / 180);
      context.drawImage(img, cx, cy);
      var result = canvas.toDataURL();
      callback && callback(result);
  }
  img.src = imgSrc;
}

注意等待图片加载到临时图片中的回调

如何旋转图像并保存图像

6 个答案: