Поверните изображение по часовой стрелке или против часовой стрелки внутри div, используя JavaScript

Question

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

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

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

Answer 1

попробуйте это: http://raphaeljs.com/image-rotation.html

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

Answer 2

Если вы используете jQuery, jQueryRotate - это небольшой (менее 3Kb минимизированный + сжатый) плагин, который вращает изображения:

http://jqueryrotate.com/

Answer 3

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

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

.

Answer 4

CSS3 поддерживает вращение , но широко не поддерживается . Как вы просили для решения JavaScript, вот один , но я не думаю, что вы можете получить плавные изображения.

Answer 5

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

Вы можете сохранить свое изображение в виде массива пикселей для JavaScript. Напишите функцию для выполнения вращения и закодируйте ее в base64 datauri, bmp может быть легко и замените image.src этим.

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