Search code examples
phpimage-uploadingcrop

Profile picture upload with picture cropping PHP

Background

Hi there, I have been recently working on a project of mine which allows users to login and signup to the system. This has been done in PHP. Once the user logs in to the system I have allowed them to upload a profile picture. The upload works and the profile picture displays.

What I would like to happen

I want to allow the user to crop the image they have uploaded to a 150x150 image so that it fits nicely when shown on the page.

What have I already tried

I have uploaded the image as normal and used GD from PHP to crop the image. When this happened, the image didn't crop to where I think the user would have wanted to crop it. The subject of the image was on the right like this example: https://i.pinimg.com/originals/29/a1/9b/29a19bb78244f8a7229fa13c21dbcd50.jpg
In this example I think the user would have chosen the tree as the subject.
(I know I can select a crop area but I will not know where the subject of the image is hence my question)

What I have achieved so far

Here is an image of what I have created so far:
Crop image after upload The slightly opaque overlay over the image is what I want the cropped area to be. This area is draggable using js. I have managed to choose the direction of the image using JS.
Here is the function that moves the overlay when a user clicks and drags it:

function elementDrag(e) 
{
    e = e || window.event;
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    // decides which direction is allowed for dragging
    if(width > height)
    {
        //landscape
        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
        //elmnt.style.left = (l+p_dims.left) + "px";
    }
    else
    {
        //portrait or sqaure
        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
        //elmnt.style.top = (elmnt.offsetTop - (t+p_dims.top)) + "px";
    }
}


This is the area where I would potentially like to change it so that overlay doesn't go past the image dimensions on screen

What I have failed to do

I wanted to make the draggable overlay only over the area of the image and not the whole page. Once the overlay has been placed the user should be allowed to click the crop button to crop the image. I know how to crop the image using a crop area in PHP and upload it afterwards.
I did find this js library but not keen on using it, I will though if it is a last resort. https://github.com/Foliotek/Croppie
So how do I do this without using any PHP libraries if possible? Thanks in advance.

Solution

  • I've been dealing with something like this. Croppie seamed like a very viable option. I tried it out and it works wonders. Have been using it every since. Great little tool. Highly recommend you use it.