Как обрезать только определенную область, используя HTML5 + Javascript или язык сервера?
Прежде чем задать свой вопрос, у меня есть тестовая страница, чтобы все поняли мой вопрос лучше. URL-адрес http://iamthemoon.com/crop/
Вы можете переместить красный выбор.
Мне нравится обрезать только область красного выделения. Я думал, что это легко сделать в HTML5 canvas, но это была моя ошибка. Сначала я погуглил об этом 2 дня, но не смог найти решение. Существует много инструментов обрезки на основе HTML5, но они имеют только квадратное выделение.
Затем я посмотрел на PHP GD и imagemagick, но также не смог найти решения.
Я посмотрел на Adobe Online Photoshop, но им не хватает инструмента свободной формы или инструмента выбора свободной формы.
кто-нибудь видел подобный javascript/php/ruby / или любую другую веб-технологию? или это вообще возможно?
3 ответа
Просто чтобы ответить на вопрос, если это возможно. Мне пришлось столкнуться с той же проблемой, и у меня были (полные) выходные, чтобы решить ее с помощью HTML5 .
Посмотрите демо здесь.
Надеюсь, поможет.
РЕДАКТИРОВАТЬ: Просто немного псевдокода:
1. Нарисуйте картину на холсте. 2. Записать щелчки мыши на холсте. 3. Нарисуйте шаблон, используя координаты щелчков мыши. 4. Заполните шаблон исходным изображением. 5. Замените оригинальное изображение рисунком.
РЕДАКТИРОВАТЬ: исходный код выпущен https://github.com/netplayer/crop
Я работаю над той же темой. Моя идея теперь состояла в том, чтобы нарисовать противоположный многоугольник (ы) и сделать их прозрачными, используя imagecolorallocatealpha. Затем многоугольник рисуется с помощью изображения заполненного полигона. Для клиентской части мы будем использовать предопределенные изображения (таким образом, предопределенные полигоны в php). Я тоже сталкивался с этим: http://brittonkerin.com/image_region_selector/irs_demo.html. Надеюсь, это поможет несколько.
http://shedlimited.debrucellc.com/
используйте HTML5, чтобы нарисовать линию / координаты,
чем просто использовать клип () вместо инсульта