jCrop resize with correct coords when changing image

Question

Hoping this doesn't get flagged as a duplicate because none of the other q/as on SO have helped me fix this, I think I need a more specific line of help.

I have a profile page on my site that allows the user to change their profile picture without page reloads (via AJAX / jQuery).

This all works fine. The user opens the "Change Profile Picture" modal, selects a file to upload and presses "Crop this image". When this button is pressed, it uploads a file to the website, using the typical way of sending the file and formData (which I append the file data to).

It gets sent backend with the following jQuery:

// Upload the image for cropping (Crop this Image!)
$("#image-upload").click(function(){

    // File data
    var fileData = $("#image-select").prop("files")[0];

    // Set up a form
    var formData = new FormData();

    // Append the file to the new form for submission
    formData.append("file", fileData);

    // Send the file to be uploaded
    $.ajax({

        // Set the params
        cache: false,
        contentType: false,
        processData: false,

        // Page & file information
        url: "index.php?action=uploadimage",
        dataType: "text",
        type: "POST",

        // The data to send
        data: formData,

        // On success...
        success: function(data){

            // If no image was returned
            // "not-image" is returned from the PHP script if we return it in case of an error
            if(data == "not-image"){
                alert("That's not an image, please upload an image file.");
                return false;
            }

            // Else, load the image on to the page so we don't need to reload
            $(profileImage).attr("src", data);

            // If the API is already set, then we should apply a new image
            if(jCropAPI){
                jCropAPI.setImage(data + "?" + new Date().getTime());
            }

            // Initialise jCrop
            setJCrop();

            //$("#image-profile").show();
            $("#send-coords").show();
        }
    })
});

setJcrop does the following

function setJCrop(){

    // Get width / height of the image
    var width = profileImage.width();
    var height = profileImage.height();

    // Var containing the source image
    var imgSource = profileImage.attr("src");

    // New image object to work on
    var image = new Image();
    image.src = imgSource;

    // The SOURCE (ORIGINAL) width / height
    var origWidth = image.width;
    var origHeight = image.height;

    // Set up the option to jCrop it
    $(profileImage).Jcrop({
        onSelect: setCoords,
        onChange: setCoords,
        setSelect: [0, 0, 51, 51],
        aspectRatio: 1,             // This locks it to a square image, so it fits the site better
        boxWidth: width,
        boxHeight: height,          // Fixes the size permanently so that we can load new images
    }, function(){jCropAPI = this});

    setOthers(width, height, origWidth, origHeight);
}

And once backend, it does the following:

public function uploadImage($file){

    // See if there is already an error
    if(0 < $file["file"]["error"]){
        return $file["file"]["error"] . " (error)";
    }else{

        // Set up the image
        $image = $file["file"];
        $imageSizes = getimagesize($image["tmp_name"]);

        // If there are no image sizes, return the not-image error
        if(!$imageSizes){
            return "not-image";
        }

        // SIZE LIMIT HERE SOON (TBI)

        // Set a name for the image
        $username = $_SESSION["user"]->getUsername();
        $fileName = "images/profile/$username-profile-original.jpg";

        // Move the image which is guaranteed a unique name (unless it is due to overwrite), to the profile pictures folder
        move_uploaded_file($image["tmp_name"], $fileName);

        // Return the new filename
        return $fileName;
    }
}

Then, the user selects their area on the image with the selector and pressed "Change Profile Picture" which does the following

// Send the Coords and upload the new image
$("#send-coords").click(function(){

    $.ajax({
        type: "POST",
        url: "index.php?action=uploadprofilepicture",
        data: {
            coordString: $("#coords").text() + $("#coords2").text(),
            imgSrc: $("#image-profile").attr("src")
        },
        success: function(data){
            if(data == "no-word"){
                alert("Can not work with this image type, please try with another image");
            }else{

                // Append a date to make sure it reloads the image without using a cached version
                var dateNow = new Date();
                var newImageLink = data + "?" + dateNow.getTime();
                $("#profile-picture").attr("src", newImageLink);

                // Hide the modal
                $("#profile-picture-modal").modal("hide");
            }
        }
    });
})

The backend is:

public function uploadProfilePicture($coordString, $imgSrc){

    // Target dimensions
    $tarWidth = $tarHeight = 150;

    // Split the coords in to an array (sent by a string that was created by JS)
    $coordsArray = explode(",", $coordString);

    //Set them all from the array
    $x =            $coordsArray[0];
    $y =            $coordsArray[1];
    $width =        $coordsArray[2];
    $height =       $coordsArray[3];
    $newWidth =     $coordsArray[4];
    $newHeight =    $coordsArray[5];
    $origWidth =    $coordsArray[6];
    $origHeight =   $coordsArray[7];

    // Validate the image and decide which image type to create the original resource from
    $imgDetails = getimagesize($imgSrc);
    $imgMime = $imgDetails["mime"];

    switch($imgMime){
        case "image/jpeg":
            $originalImage = imagecreatefromjpeg($imgSrc);
            break;
        case "image/png":
            $originalImage = imagecreatefrompng($imgSrc);
            break;
        default:
            return "no-work";
    }

    // Target image resource
    $imgTarget = imagecreatetruecolor($tarWidth, $tarHeight);
    $img = imagecreatetruecolor($newWidth, $newHeight);

    // Resize the original image to work with our coords
    imagecopyresampled($img, $originalImage, 0, 0, 0, 0,
        $newWidth, $newHeight, $origWidth, $origHeight);

    // Now copy the CROPPED image in to the TARGET resource
    imagecopyresampled(
        $imgTarget,     // Target resource
        $img,           // Target image
        0, 0,           // X / Y Coords of the target image; this will always be 0, 0 as we do not want any black nothingness
        $x, $y,         // X / Y Coords (top left) of the target area
        $tarWidth,
        $tarHeight,       // width / height of the target
        $width,
        $height         // Width / height of the source image crop
    );

    $username = $_SESSION["user"]->getUsername();
    $newPath = "images/profile/$username-profile-cropped.jpg";

    // Create that shit!
    imagejpeg($imgTarget, $newPath);

    // Return the path
    return $newPath;
}

So basically this the returns the path of the new file, which gets changed to the user's profile picture (same name every time) and uploaded live with a time appended after ? to refresh the image properly (no cache).

This all works fine, however if the user selects another image to upload, after already uploading one, the coords get all messed up (e.g. they go from 50 to 250) and they end up cropping a totally different part of the image, leaving most of it black nothing-ness.

Really sorry for the ridiculous amount of code that is in this question but I'd appreciate any help from people who might have worked around this before.

Some of the code may seem out of place but that's just me trying to debug it.

Thanks, and again, sorry for the size of this question.

-Edit-

My setCoords() and setOthers() functions look like so:

//Set the coords with this method, that is called every time the user makes / changes a selection on the crop panel
function setCoords(c){
    $("#coords").text(c.x + "," + c.y + "," + c.w + "," + c.h + ",");
}

//This one adds the other parts to the second div; they will be concatenated in to the POST string
function setOthers(width, height, origWidth, origHeight){
    $("#coords2").text(width + "," + height + "," + origWidth + "," + origHeight);
}

Answer 1

I have now resolved this issue.

The problem for me was that when using setJCrop(); - it was not re-loading the image. The reason for this is that the image uploaded and then loaded in to the JCrop window had the same name every time (username as a prefix, and then profile-cropped.jpg).

So to try and resolve this, I used the setImage method which loaded a full-sized image instead.

I got around this by setting the boxWidth / boxHeight params but they just left me with the issue of the coordinates being incorrect every time I loaded a new image in.

Turns out, it was loading the image from the cache every time, even when I was using new Image(); within jQuery.

To solve this, I have now used destroy(); on the jCropAPI and then re-initialised it every time, witout using setImage();

I set a max-width in the CSS on the image itself, which stopped it from being locked to a specific width.

The next problem was that every time I loaded an image a second time, it left the width / height of the old image there, which made the image look all skewed and wrong.

To solve this, I reset the width & height of the image that I use jCrop on, to "" with $(profileImage).css("width", ""); $(profileImage).css("height", ""); before re-setting the source of the image from the new uploaded image.

But I was still left with the issue of using the same name on the images, and then causing it to load from cache every time.

My solution to this was to add an "avatar" column in the database and save the image name in the Database each time. The image was named as $username-$time.jpg and $username-$time.jpg-cropped.jpg where $username is the username of the user (derp) and $time is simply time(); inside PHP.

This meant that every time I uploaded an image, it had a new name, so when any calls were made to this image, there was no cache of it.

Appending like imageName + ".jpg?" + new Date.getTime(); worked for some things but then when sending the image name backend, it didn't work properly, and deciding when to append it / not append it was a pain, and then one thing required it to be appended to force a re-load, but then when appended it didn't work properly, so I had to re-work it.

So the key: (TL;DR)

Don't use the same image name with jCrop, if you are loading a new image; upload an image with a different name and then refer to that one. Cache problems are a pain, and you can't really work around them properly without just using a new name every time, as this ensures that there will be absolutely no more problems (so long as the name is always unique).

Then, when you initialise jCrop, destroy the previous one beforehand if there is one. Use max-width instead of width on an image to stop it from locking the width, and re-set the width / height of the image if you're loading a new one in to the same <img> or <div>

Hope this helps somebody!

Answer 2

I used jcrop and I think this has happened to me. When there is a new image, you have to "reset" jcrop. Try something like this:

function resetJCrop()
{
    if (jCropAPI) {
        jCropAPI.disable();
        jCropAPI.release();
        jCropAPI.destroy();
    }
}

$("#image-upload").click(function(){

    success: function(data){
    ...

    resetJCrop(); // RESETTING HERE

    // If the API is already set, then we should apply a new image
    if(jCropAPI){
        jCropAPI.setImage(data + "?" + new Date().getTime());
    }

    // Initialise jCrop
    setJCrop();

    ...
    }
});

I can't remember the details about why I have to use disable() AND release() AND destroy() in my particular case. May be you can use only one of those. Just try it, and see if that works for you!