Как обрезать только определенную область, используя HTML5 + Javascript или язык сервера? - PullRequest
Новая
       35

Как обрезать только определенную область, используя HTML5 + Javascript или язык сервера?

3 голосов
/ 29 февраля 2012

Прежде чем задать свой вопрос, у меня есть тестовая страница, чтобы все могли лучше понять мой вопрос.URL-адрес http://iamthemoon.com/crop/

Вы можете переместить выделение красным цветом.

Мне нравится обрезать только область выделения красного цвета.Я думал, что это легко сделать в HTML5 canvas, но это была моя ошибка.Сначала я гуглил об этом 2 дня, но не смог найти решение.Существует много инструментов обрезки на основе HTML5, но они имеют только квадратное выделение.

Затем я посмотрел на PHP GD и imagemagick, но не смог найти решение.

Я посмотрел наAdobe Online Photoshop, но им не хватает инструмента лассо свободной формы или инструмента выбора свободной формы.

Кто-нибудь видел подобный javascript / php / ruby ​​/ или какую-либо другую веб-технологию?или это вообще возможно?

Ответы [ 3 ]

6 голосов
/ 30 июля 2012

просто чтобы ответить на вопрос, если это возможно.Мне пришлось столкнуться с той же проблемой, и я взял (полные) выходные, чтобы решить ее с помощью HTML5.

Посмотрите демо здесь .

Надеюсь, это поможет.

РЕДАКТИРОВАТЬ: немного псевдокода:

1.Нарисовать картинку на холсте.2. Записать щелчки мыши на холсте.3. Нарисуйте шаблон с помощью координат щелчков мыши. 4. Заполните шаблон исходным изображением.5. Замените исходное изображение рисунком.

РЕДАКТИРОВАТЬ: исходный код выпущен https://github.com/netplayer/crop

1 голос
/ 08 марта 2012

Я работаю над тем же предметом . Моя идея теперь состояла в том, чтобы нарисовать противоположный многоугольник (ы) и сделать их прозрачными, используя imagecolorallocatealpha. Затем многоугольник рисуется с помощью изображения заполненного полигона. Для клиентской части мы будем использовать предопределенные изображения (таким образом, предопределенные полигоны в php). Я тоже сталкивался с этим: http://brittonkerin.com/image_region_selector/irs_demo.html. Надеюсь, это поможет.

0 голосов
/ 17 января 2013

http://shedlimited.debrucellc.com/

используйте html5 для рисования линии / координат,

, чем просто используйте clip () вместо штриха

...