Привет, я недавно работал над моим проектом, который позволяет пользователям входить в систему и регистрироваться в системе. Это было сделано в PHP. Когда пользователь входит в систему, я разрешаю ему загрузить фотографию профиля. Загрузка работает, и изображение профиля отображается.
Я хочу позволить пользователю обрезать изображение, которое он загрузил, в изображение размером 150×150, чтобы оно хорошо подходило при отображении на странице.
Я загрузил изображение как обычно и использовал 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, если это возможно? Заранее спасибо.
Задача ещё не решена.
Других решений пока нет …