Комбинированное вращение и обрезка изображений в jQuery

Question

Комбинированное вращение и обрезка изображений в jQuery

В настоящее время у нас есть система обрезки изображений, которая использует jCrop на внешнем интерфейсе, и System.Drawing в.NET на бэкэнде - это работает очень хорошо, но теперь нам нужно ввести поворот изображения. Требуются только углы 90 градусов, и jQuery.Rotate прекрасно работает в отдельности, но я хотел бы изящно объединить эти два плагина jQuery. Есть ли у вас опыт в этой области? Существуют ли решения "встряхни и испеки"?

6

javascript jquery image image-manipulation

Источник

user20321 17 сен '09 в 11:12

5 ответов

Другие вопросы по тегам javascript jquery image image-manipulation

user1971120 20 дек '16 в 22:08 2016-12-20 22:08 · Answer 1 · 2016-12-20 22:08

Я знаю, что это старый вопрос, но вы проверили этот плагин jQuery под названием CropIt?

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

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

1

Источник

user1971120 20 дек '16 в 22:08

user166893 31 май '11 в 15:07 2011-05-31 15:07 · Answer 2 · 2011-05-31 15:07

Я предлагаю вращать сторону сервера изображений. Вы действительно не можете комбинировать jCrop с повернутым изображением, так как метод на основе CSS будет "лежать" относительно ширины и высоты.

Это может быть очень быстро. Ваш пользовательский интерфейс просто добавил бы 'rotate=90' к строке запроса изображения, когда кнопка была нажата, и изображение перезагрузилось бы.

Вот очень простой пример использования jCrop и изменения размера на основе строки запроса.

Взгляните на демонстрационную страницу, чтобы увидеть, насколько она отзывчива - добавление команды поворота заняло бы всего несколько строк javascript. Если вам это нужно, я могу загрузить образец того, как их объединить.

user334577 11 апр '11 в 10:17 2011-04-11 10:17 · Answer 3 · 2011-04-11 10:17

Вы можете попробовать jquery CropZoom: http://plugins.jquery.com/project/CropZoom

Демонстрация и загрузка здесь: http://www.gastonrobledo.com.ar/cropzoom/index.html

0

Источник

user334577 11 апр '11 в 10:17

user164548 17 сен '09 в 11:15 2009-09-17 11:15 · Answer 4 · 2009-09-17 11:15

Я думаю, что jQuery pipe-lining - это ответ на любой плагин jQuery.

например:

$("image").rotate(foo).crop(foo);

0

Источник

user164548 17 сен '09 в 11:15

user23501 17 сен '09 в 14:37 2009-09-17 14:37 · Answer 5 · 2009-09-17 14:37

Поскольку два плагина работают по-разному, я не думаю, что вы можете легко объединить их. jCrop просто позволяет определить прямоугольную область над изображением. Вращение, с другой стороны, либо использует <canvas> чтобы фактически повернуть изображение или фильтр DXImageTransform, чтобы показать, что оно повернуто (фактически не поворачивая исходное изображение).