使用图片裁剪上传个人资料图片 PHP

Question

背景

你好，我最近在做一个允许用户登录和注册系统的项目。这已在 PHP 中完成。一旦用户登录系统，我就允许他们上传个人资料照片。上传成功并显示头像。

我希望发生什么

我想允许用户将他们上传的图片裁剪为 150x150 的图片，以便它在页面上显示时非常适合。

我已经尝试过什么

我已正常上传图像并使用 PHP 中的 GD 裁剪图像。发生这种情况时，图像没有裁剪到我认为用户想要裁剪的位置。图片的主题像这个例子一样在右边：https://i.pinimg.com/originals/29/a1/9b/29a19bb78244f8a7229fa13c21dbcd50.jpg
在这个例子中，我认为用户会选择树作为主题。
（我知道我可以 select 裁剪区域，但我不知道图像的主题在哪里，因此我的问题）

到目前为止我取得了什么

这是我目前创建的图像：
图像上略微不透明的覆盖层是我想要的裁剪区域。这个区域是可以使用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 库的情况下做到这一点呢？提前致谢。

Answer 1

我一直在处理这样的事情。 Croppie 似乎是一个非常可行的选择。我试了一下，效果很好。从那以后一直在使用它。很棒的小工具。强烈推荐您使用它。