[嗨,我最近一直在从事我的项目,该项目允许用户登录并注册系统。这已在PHP中完成。用户登录系统后,我就允许他们上传个人资料图片。上传成功,并显示个人资料图片。
我想允许用户将他们上传的图像裁剪为150x150的图像,以便在页面上显示时非常合适。
我已正常上传图像,并使用PHP的GD裁剪图像。发生这种情况时,图像并未裁剪到我认为用户会想要裁剪的位置。像这个例子一样,图像的主题在右边: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库的情况下做到这一点?提前致谢。
背景您好,我最近一直在从事我的项目,该项目允许用户登录并注册系统。这已在PHP中完成。用户登录到系统后,我就拥有...
我一直在处理这样的事情。 Croppie就像一个非常可行的选择。我尝试了一下,效果很好。从那以后一直在使用它。很棒的小工具。强烈建议您使用它。