Обрезать выбранное изображение в круглую форму, перед отправкой на сервер - PullRequest
0 голосов
/ 01 сентября 2018

Я искал это, но большая часть того, что я нашел, была либо мертвой, либо не поддерживалась для старых браузеров / обрезка изображений в прямоугольной форме.

Я хочу что-то похожее на функцию Facebook для загрузки изображений профиля. Пользователь выбирает изображение. Если это изображение не превышает определенные размеры, оно будет отображаться, а затем пользователь перетаскивает выделенный прямоугольник и обрезает изображение.

Но вместо прямоугольной формы мне нужна круглая форма.

Итак, если у меня есть вход для просмотра / загрузки изображения:

<input type="file" class="sr-only" id="input" name="image" accept="image/*">

После того, как пользователь выберет изображение, либо в том же месте, либо во всплывающем окне, пользователь сможет перетащить выделенную круглую форму и затем нажать Crop.

Итак, самые важные части:

  • Изображение обрезано в круглой форме.
  • Поддерживается для большинства браузеров, включая браузеры для мобильных устройств / планшетов / iPad.
  • Возможность загрузки обрезанного изображения на сервер с помощью PHP.

Я знаю, что платформа предназначена для помощи с ошибками и ошибками, но, как я уже сказал, я сначала искал и хочу спросить здесь, так как здесь много разработчиков, что некоторые из них могли оказаться в той же ситуации и найти правильную решение.

1 Ответ

0 голосов
/ 01 сентября 2018

Если вы просто хотите обрезать изображение, возможно, вы захотите использовать обтравку и маскировку. То, что это делает, это обрезает изображение в определенной форме. Вот пример кода, который вы можете использовать:

.crop {
 clip-path: circle(60px at center);
}
<img src="src.png">

отсюда вы можете сделать то, что вам нужно, чтобы сделать обтравочную маску перетаскиваемой. надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...