Поверните изображение по часовой стрелке или против часовой стрелки внутри div с помощью javascript

Question

HI, есть способ, которым я могу поворачивать изображение внутри div по часовой стрелке или против часовой стрелки.

У меня есть основная фиксированная ширина div [overflow set to hidden] с изображениями, загруженными из базы данных. Существует полоса прокрутки для отображения изображений внутри div. Когда изображение кликается, мне нужно показать вращающуюся анимацию по часовой стрелке или против часовой стрелки.

Я сделал это с использованием матричного фильтра. Я хотел бы знать, можно ли сделать это в IE только без использования каких-либо фильтров.

Answer 1

попробовать это: http://raphaeljs.com/image-rotation.html

использует холст, но и поддерживает IE

Answer 2

Единственный способ, которым я могу думать о вращении изображений на клиентской стороне в IE, - это использование фильтров. Для нескольких последних версий в других браузерах вы можете использовать <canvas> control.

Ваша альтернатива - использовать серверный скрипт для поворота изображения. После этого вы можете отправить информацию о том, как повернуть его с JavaScript (то есть генерировать путь к изображению, такие как /rotate?image=img.jpg & суммы = 90)

Answer 3

CSS3 supports rotation, но it isn't widely supported. Как вы просили JavaScript-решение, here's one, но я не думаю, что вы можете получить гладкие изображения.

Answer 4

Если вы используете JQuery, jQueryRotate небольшой (менее 3KB уменьшенная + сжат GZIP) плагин, который поворачивает изображение:

http://jqueryrotate.com/

Answer 5

Есть и другой способ повернуть изображения без каких-либо фильтров/html5 .. это неприятно и бесполезно в реальном мире, но возможно.

Вы можете сохранить ваше изображение как массив пикселей, для javascript. Write для выполнения вращения с ним и кодирования его на base64 datauri, bmp может быть легко и заменить image.src на него.

Там будет некоторое ограничение о размер_файле и поддержке в старом браузере и конечно ужасном исполнении ..