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

Question

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

Answer 1

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

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

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

Answer 2

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

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

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

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

Answer 3

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

Answer 4

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

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

Answer 5

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

например:

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