php - 个人资料图片上传和图片裁剪 PHP
问题描述
背景
您好,我最近一直在研究我的一个项目,该项目允许用户登录和注册系统。这已在 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 库的情况下做到这一点呢?提前致谢。
解决方案
我一直在处理这样的事情。Croppie缝合像一个非常可行的选择。我试了一下,效果很好。从那以后一直在使用它。很棒的小工具。强烈推荐你使用它。
推荐阅读
- c++ - 如何解决传递给 boost 线程的函数中的歧义
- r - 通过更高效、更快速的功能减少数据清理
- varnish - 如何忽略清漆中的大饼干
- redirect - OctoberCMS 获取 CMS 页面的 URL
- asp.net-core - 不记名令牌仅在浏览没有“www”的站点时有效。
- javascript - 使用 javascript 创建 HTML 元素?
- image-processing - 如何使用 HSV 获得最小的颜色轮廓?
- python - 根据非连续整数,字符和浮点数在python中拆分字符串
- c# - Store 没有实现 IUserRoleStore
用户管理器 .GetUserRoleStore() ASP.NET Core MVC 3 - mysql - Mysql加入按列分组以删除重复但仍返回行数据