Bildbearbeitung

<?php
    // FUNCTION IRGENDWO DEFINIEREN
    function save_thumbnail($file, $uploaddir, $thumbwidth) {
        $imageinfo = getimagesize($uploaddir.$file);

        $img = null;
        switch($imageinfo[2]){
            case IMAGETYPE_PNG:
                $img = imagecreatefrompng($uploaddir.$file);
                break;
            case IMAGETYPE_JPEG:
                $img = imagecreatefromjpeg($uploaddir.$file);
                break;
            case IMAGETYPE_GIF:
                $img = imagecreatefromgif($uploaddir.$file);
                break;
        }

        $width = imagesx($img);
        $height = imagesy($img);

        $thumbheight = floor($height * ($thumbwidth / $width));

        $thumbnail = imagecreatetruecolor($thumbwidth, $thumbheight);

        imagecopyresampled($thumbnail, $img, 0, 0, 0, 0, $thumbwidth, $thumbheight, $width, $height);

        $filename_expl = explode(".",$file);
        $thumb_filename = $filename_expl[0]."_thumbnail.".$filename_expl[1];
        switch ($imageinfo[2]) {
            case IMAGETYPE_PNG:
                imagepng($thumbnail, $uploaddir.$thumb_filename);
                break;
            case IMAGETYPE_JPEG:
                imagejpeg($thumbnail, $uploaddir.$thumb_filename);
                break;
            case IMAGETYPE_GIF:
                imagegif($thumbnail, $uploaddir.$thumb_filename);
                break;
        }

        imagedestroy($thumbnail);
        imagedestroy($img);
    }
?>

// edit_product.php
<?php
    $file = $_GET['file'];
    $_SESSION['imageedit_file'] = $file;
    if(!isset($_SESSION['imageedit_actions'])) {
        $_SESSION['imageedit_actions'] = array();
    }
    if(isset($_POST['action'])){
        switch($_POST['action']){
            case 'undo':
                array_pop($_SESSION['imageedit_actions']);
                break;
            case 'crop':
                $_SESSION['imageedit_actions'][] = array('crop',$_POST['x'],$_POST['y'],$_POST['width'],$_POST['height']);
                break;
            default:
                $_SESSION['imageedit_actions'][] = $_POST['action'];
        }
    }
?>
<div id="imageedit_div">

    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-6">
            <div id="editimage_show">
                <img src="content/editimage.php?sid=<?php echo session_id(); ?>" />
                <div id="editimage_croparea" hidden=true></div>
            </div><br />
        </div>

        <div class="col-md-2">
            <button class="imageedit_action button" onclick="changeAction('gray')">
                <i class="fa fa-paint-brush" aria-hidden="true"></i> Grayscale
            </button><br />
            <button class="imageedit_action button" onclick="changeAction('turn_left')">
                <i class="fa fa-rotate-left" aria-hidden="true"></i> Rotate Left
            </button><br />
            <button class="imageedit_action button" onclick="changeAction('turn_right')">
                <i class="fa fa-rotate-right" aria-hidden="true"></i> Rotate Right
            </button><br />
            <button class="imageedit_action button" onclick="changeAction('mirror')">
                <i class="fa fa-exchange" aria-hidden="true"></i> Mirror
            </button><br />
            <button class="imageedit_action button" onclick="showCrop()" id="editimage_crop">
                <i class="fa fa-crop" aria-hidden="true"></i> Crop
            </button>

            <button class="imageedit_action button crop_active_button" onclick="sendCropInfo()" hidden=true>
                <i class="fa fa-crop" aria-hidden="true"></i> Save
            </button>
            <button class="imageedit_action button crop_active_button" onclick="hideCrop()" hidden=true>
                <i class="fa fa-crop" aria-hidden="true"></i> Cancel
            </button>
            <br />

            <button class="imageedit_action button" onclick="changeAction('undo')">
                <i class="fa fa-history" aria-hidden="true"></i> Undo
            </button><br /><br />

            <button class="imageedit_button button" onclick="toIndexPage()">Cancel</button>
            <button class="imageedit_button button" onclick="changeAction('save')">Save Image</button>
        </div>
        <div class="col-md-2"></div>
    </div>
</div>


// editimage.php
<?php
    session_id($_REQUEST['sid']);
    session_start();
    include_once "../conf.php";
    include_once "../helpers.php";
    $file = $_SESSION['imageedit_file'];
    $actions = $_SESSION['imageedit_actions'];
    $imageinfo = getimagesize($UPLOAD_DIR.$file);

    $img = null;
    switch($imageinfo[2]){
        case IMAGETYPE_PNG:
            $img = imagecreatefrompng($UPLOAD_DIR.$file);
            break;
        case IMAGETYPE_JPEG:
            $img = imagecreatefromjpeg($UPLOAD_DIR.$file);
            break;
        case IMAGETYPE_GIF:
            $img = imagecreatefromgif($UPLOAD_DIR.$file);
            break;
    }

    header ("Content-type: {$imageinfo['mime']}");

    if ($img){
        foreach($actions as $action) {
            if(is_array($action)){
                // Crop
                $crop_img = imagecreatetruecolor($action[3], $action[4]);
                imagecopy( $crop_img , $img , 0, 0, $action[1] , $action[2] , $action[3] ,$action[4] );
                $img = $crop_img;
            }else {
                // Other actions
                switch ($action) {
                    case "gray":
                        imagefilter($img, IMG_FILTER_GRAYSCALE);
                        break;
                    case "turn_right":
                        $img = imagerotate($img, 270, 0);
                        break;
                    case "turn_left":
                        $img = imagerotate($img, 90, 0);
                        break;
                    case "mirror":
                        imageflip($img, IMG_FLIP_HORIZONTAL);
                        break;
                }
            }
        }

        if(array_values(array_slice($actions, -1))[0] == "save"){
            switch ($imageinfo[2]) {
                case IMAGETYPE_PNG:
                    imagepng($img,$UPLOAD_DIR.$file);
                    break;
                case IMAGETYPE_JPEG:
                    imagejpeg($img,$UPLOAD_DIR.$file);
                    break;
                case IMAGETYPE_GIF:
                    imagegif($img,$UPLOAD_DIR.$file);
                    break;
            }
            save_thumbnail($file, $UPLOAD_DIR, $THUMB_WIDTH);
        }
        switch ($imageinfo[2]) {
            case IMAGETYPE_PNG:
                imagepng($img);
                break;
            case IMAGETYPE_JPEG:
                imagejpeg($img);
                break;
            case IMAGETYPE_GIF:
                imagegif($img);
                break;
        }


        imagedestroy($img);
    }

?>

//editimage_changeaction.js (in index.php einbinden!)
function changeAction(action){
    var formData = new FormData();
    formData.append("action", action);
    $.ajax({
        type: "POST",
        data: formData,
        url: window.location.href,
        cache: false,
        contentType: false,
        processData: false,
        success: function(response, error){
            editActiontransferComplete(response, error);
            if(action == 'save'){
                toIndexPage();
            }
        }
    });
}

function editActiontransferComplete(response, error) {
    //console.log(response);
    $("#editimage_show img").attr('src', $("#editimage_show img",response).attr('src'));
}

function toIndexPage(){
    window.location.href = location.protocol + '//' + location.host + location.pathname;
}

function showCrop(){
    $(".crop_active_button").prop("hidden", false);
    $("#editimage_crop").prop("hidden", true);

    var img_width = $('#editimage_show img').width();
    var img_height = $('#editimage_show img').height();
    var min_width = 50;
    var min_height = 50;
    $("#editimage_show").width(img_width).height(img_height);
    $("#editimage_croparea").prop("hidden", false)
        .resizable({ helper: '.ui-resizable-helper',
                    minHeight: min_height,
                    minWidth: min_width,
                    aspectRatio: true,
                    containment:  "parent"  })
        .draggable({ containment: "parent" });
}

function hideCrop(){
    $(".crop_active_button").prop("hidden", true);
    $("#editimage_crop").prop("hidden", false);

    $("#editimage_croparea").prop("hidden", true)
        .resizable("destroy")
        .draggable("destroy");
}

function sendCropInfo(){
    var position = $('#editimage_croparea').position();
    var width = $('#editimage_croparea').width();
    var height = $('#editimage_croparea').height();
    var x = position.left - 15;
    var y = position.top;

    hideCrop();
    var formData = new FormData();
    formData.append("action", "crop");
    formData.append("x", x);
    formData.append("y", y);
    formData.append("width", width);
    formData.append("height", height);
    $.ajax({
        type: "POST",
        data: formData,
        url: window.location.href,
        cache: false,
        contentType: false,
        processData: false,
        success: function(response, error){
            editActiontransferComplete(response, error);
        }
    });
}