图像调整大小，裁剪并上传到服务器和数据库

Question

我正在尝试为用户上传头像图片，他们也可以在其中裁剪头像。此时我可以在我的服务器上保存图像的正常大小，但是当我尝试裁剪该图像时，就像坐标是固定的一样，我想在左上角。 这是我在 accounts.php 中的表单：

<a href="#" data-toggle="modal" data-target="#change-profile">
    <div id="profile-result">
        <?php if (file_exists('accounts/images/' . $session_username . '.jpg')): ?>
            <img src="<?php echo 'accounts/images/' . $session_username . '.jpg'; ?>" alt="" class="thumb-lg img-circle" style="width: 120px; height: 120px;">
        <?php else: ?>
            <img src="accounts/images/default.png" alt="" class="thumb-lg img-circle"  style="width: 120px; height: 120px;">
        <?php endif ?>
    </div>
</a>

<div class="modal fade" id="change-profile">
    <div class="modal-dialog">
        <div class="" style="background: #fff; padding: 10px;">
            <div class="ajax-response" id="loading"></div>
            <h4 class="m-t-5 m-b-5 ellipsis">Change profile</h4>
            <div class="image-full-div" style="width: 70%;">
                <form action="crop.php" enctype="multipart/form-data" method="post" onsubmit="return checkCoords();">
                    <p>Image: <input name="image" id="fileInput" type="file" /></p>
                    <input type="hidden" id="x" name="x" />
                    <input type="hidden" id="y" name="y" />
                    <input type="hidden" id="w" name="w" />
                    <input type="hidden" id="h" name="h" />
                    <input name="upload" type="submit" value="Upload" />
                </form>

                <p><img id="filePreview" style="display:none;"/></p>
            </div>
        </div>
    </div>
</div>

这是我上传的 crop.php 文件：

<?php
//if upload form is submitted
if(isset($_POST["upload"])){
    //get the file information
    $error = '';
    $fileName = basename($_FILES["image"]["name"]);
    $fileTmp = $_FILES["image"]["tmp_name"];
    $fileType = $_FILES["image"]["type"];
    $fileSize = $_FILES["image"]["size"];
    $fileExt = substr($fileName, strrpos($fileName, ".") + 1);

    //specify image upload directory
    $largeImageLoc = 'accounts/images/'.$fileName;
    $thumbImageLoc = 'accounts/images/thumb/'.$fileName;

    //check file extension
    if((!empty($_FILES["image"])) && ($_FILES["image"]["error"] == 0)){
        if($fileExt != "jpg" && $fileExt != "jpeg" && $fileExt != "png"){
            $error = "Sorry, only JPG, JPEG & PNG files are allowed.";
        }
    }else{
        $error = "Select a JPG, JPEG & PNG image to upload";
    }

    //if everything is ok, try to upload file
    if(strlen($error) == 0 && !empty($fileName)){
        if(move_uploaded_file($fileTmp, $largeImageLoc)){
            //file permission
            chmod ($largeImageLoc, 0777);

            //get dimensions of the original image
            list($width_org, $height_org) = getimagesize($largeImageLoc);

            //get image coords
            $x = (int) $_POST['x'];
            $y = (int) $_POST['y'];
            $width = (int) $_POST['w'];
            $height = (int) $_POST['h'];

            //define the final size of the cropped image
            $width_new = $width;
            $height_new = $height;

            //crop and resize image
            $newImage = imagecreatetruecolor($width_new,$height_new);


            switch($fileType) {
                case "image/gif":
                    $source = imagecreatefromgif($largeImageLoc); 
                    break;
                case "image/pjpeg":
                case "image/jpeg":
                case "image/jpg":
                    $source = imagecreatefromjpeg($largeImageLoc); 
                    break;
                case "image/png":
                case "image/x-png":
                    $source = imagecreatefrompng($largeImageLoc); 
                    break;
            }

            imagecopyresampled($newImage,$source,0,0,$x,$y,$width_new,$height_new,$width,$height);

            switch($fileType) {
                case "image/gif":
                    imagegif($newImage,$thumbImageLoc); 
                    break;
                case "image/pjpeg":
                case "image/jpeg":
                case "image/jpg":
                    imagejpeg($newImage,$thumbImageLoc,90); 
                    break;
                case "image/png":
                case "image/x-png":
                    imagepng($newImage,$thumbImageLoc);  
                    break;
            }
            imagedestroy($newImage);

            //remove large image
            //unlink($imageUploadLoc);

            //display cropped image
            echo 'CROP IMAGE:<br/><img src="'.$thumbImageLoc.'"/>';
        }else{
            $error = "Sorry, there was an error uploading your file.";
        }
    }else{
        //display error
        echo $error;
    }
}
?>

我的Javascript文件：

//set image coordinates
function updateCoords(im,obj){
    $('#x').val(obj.x1);
    $('#y').val(obj.y1);
    $('#w').val(obj.width);
    $('#h').val(obj.height);
}

//check coordinates
function checkCoords(){
    if(parseInt($('#w').val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
}

$(document).ready(function(){
    //prepare instant image preview
    var p = $("#filePreview");
    $("#fileInput").change(function(){
        //fadeOut or hide preview
        p.fadeOut();

        //prepare HTML5 FileReader
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("fileInput").files[0]);

        oFReader.onload = function (oFREvent) {
            p.attr('src', oFREvent.target.result).fadeIn();
        };
    });

    //implement imgAreaSelect plugin
    $('img#filePreview').imgAreaSelect({
        // set crop ratio (optional)
        //aspectRatio: '2:1',
        onSelectEnd: updateCoords
    });
});

This is my image with the coordinates but I'm not sure because the normal size of the image is 1920/1080

And this image is after I press upload button