web-dev-qa-db-ja.com

画像を回転して保存する方法

私のアプリケーションでは、div、aボタンに画像があります。

表示された画像を回転させ、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つの画像があります。

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

Jqueryを使用してこれを行うにはどうすればよいですか？ jqueryでそれができない場合、php/ajaxでそれをどのように行うことができますか？

phpjavascriptjqueryajaximage-rotation
14
galtech.Mariya
//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（）

23
user849137

画像の回転：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);

それは私にとってはうまくいきます。試してみてください。

14
Ghanshyam Gohel
<?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;
              }
         }

    ?>
3
Mukesh Kumar Bijarniya

私の解決策を試して画像を回転させることができます

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

それは、画像を回転させ、角度画像が何であれ画像を保存するのに役立ちます。たとえば、画像を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>
0
nagarjun daram