Как повернуть изображение с помощью jQuery, например «Free Transform» в Photoshop?

Question

Я искал везде, но не могу найти, как повернуть (градус) с границей изображения или что-то вроде «изменяемого размера» в jQuery. Я имею в виду что-то вроде границы «Свободное преобразование» в Photoshop, которая имеет 4 места для поворота в каждом углу изображения.

Answer 1

Единственный способ сделать это в javascript - использовать элемент canvas.

Попробуйте использовать следующий плагин: http://wilq32.googlepages.com/wilq32.rollimage222

Answer 2

Если вы используете Javascript, почему бы не позволить серверу выполнить работу и получить результат с помощью вызова ajax? Изучите библиотеки ImageMagick (http://www.imagemagick.org/script/index.php). Если конечный пользователь задает параметры поворота, запишите эти входные данные в javascript, отправьте их обратно на сервер для обработки в ImageMagick (или другой библиотеке) и обновите изображение клиентская сторона.

Answer 3

Вы можете вращать изображения с помощью фильтров DirectX IE, но я не думаю, что решит вашу проблему. Возможно, вам придется использовать что-то вроде Flash или Silverlight, чтобы выполнить эту работу.

Я не знаю ни одного JavaScript, обладающего такой мощью. Вот эксперимент одного парня, но результат не очень хороший:

http://www.walterzorn.com/rotate_img/rotate_img.htm

Это тоже довольно круто, и использует Flash:

http://www.swfir.com/examples/multiple/

Answer 4

Я использую Raphaeljs (Raphaeljs.com). Это позволит вам рисовать на холсте. Таким образом, вы можете сначала добавить фоновый прямоугольник, затем добавить изображение и, наконец, повернуть. Таким образом, показывая границу. Насколько я мог найти, это невозможно при повороте wilq32.

Answer 5

CSS3 поддерживает вращение , однако в настоящее время только Chrome и Safari поддерживают вращение CSS3 с помощью веб-набора. Вот хороший пример вращения в CSS3. Если вы хотите посмотреть, работает ли он в вашем браузере, попробуйте эту ссылку . Это должны быть рабочие часы.

На данный момент Тройнц ответ выглядит как ваша лучшая ставка.

В будущем или с сафари или хромом вы можете сделать это.

$(this).css('-webkit-transform','rotate(45deg)');

Answer 6

Вот отправная точка , которая работает в WebKit. (Я использовал Safari 4.) Мне не нужно было заниматься какой-либо реальной математикой в ​​течение веков, поэтому вам нужно будет определить правильный угол поворота на основе расстояния перетаскивания. Кроме того, поле поворота немного смещается, когда вы начинаете вращаться. Они могут вращаться вокруг другой центральной точки.

Answer 7

Это может помочь. Я не эксперт, но похоже, что вы можете иметь только 90-градусный прирост в IE.