Загрузка картинки профиля с обрезкой картинки PHP

Question

Фон

Привет, я недавно работал над моим проектом, который позволяет пользователям входить в систему и регистрироваться в системе.Это было сделано в PHP.Когда пользователь входит в систему, я разрешаю ему загрузить фотографию профиля.Загрузка работает, и отображается изображение профиля.

Что бы я хотел, чтобы произошло

Я хочу разрешить пользователю обрезать загруженное изображение в изображение размером 150x150, чтобы оно хорошо припоказано на странице.

Что я уже пробовал

Я загрузил изображение как обычно и использовал GD из PHP для обрезки изображения.Когда это произошло, изображение не обрезалось там, где, я думаю, пользователь хотел бы обрезать его.Тема изображения была справа, как в этом примере: https://i.pinimg.com/originals/29/a1/9b/29a19bb78244f8a7229fa13c21dbcd50.jpg
В этом примере я думаю, что пользователь выбрал бы дерево в качестве субъекта.
(я знаю, что могу выбрать область обрезки, но я не буду знать, где предмет изображения, следовательно, мой вопрос)

Чего я достиг к настоящему моменту

Вот изображениеиз того, что я создал до сих пор:
Слегка непрозрачное наложение поверх изображения - это то, чем я хочу обрезать область.Эта область перетаскивается с помощью js.Мне удалось выбрать направление изображения с помощью JS.
Вот функция, которая перемещает оверлей, когда пользователь щелкает и перетаскивает его:

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";
    }
}

Это область, где я хотел бы изменить ее, чтобы оверлей не работал.мимо размеров изображения на экране

Что мне не удалось сделать

Я хотел сделать перетаскиваемое наложение только на область изображения, а не на всю страницу.Как только наложение будет размещено, пользователь должен иметь возможность нажать кнопку обрезки, чтобы обрезать изображение.Я знаю, как обрезать изображение с помощью области обрезки в PHP и загрузить его потом.
Я нашел эту библиотеку js, но не заинтересован в ее использовании, хотя, если это будет последним средством, я не буду.https://github.com/Foliotek/Croppie
Так как мне сделать это, не используя библиотеки PHP, если это возможно?Заранее спасибо.