загрузка изображений — загрузка профиля изображения с обрезкой изображения Stack Overflow

Фон

Привет, я недавно работал над моим проектом, который позволяет пользователям входить в систему и регистрироваться в системе. Это было сделано в 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, если это возможно? Заранее спасибо.

0

Решение

Задача ещё не решена.

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector