Drei Möglichkeiten, eine Bildrotation mit js_javascript-Kenntnissen zu erreichen

1 使用jQueryRotate.js实现

示例代码:

复制代码 代码如下:

测试结果：chrome下效果正常，旋转后img对象仍为img对象；ie8下效果正常，但旋转后img对象变为下面对象,由于对象变化,若旋转后仍按原来方法获取img对象, 则会报js错误.欲获取image对象, 可根据class获取.如果图像旋转后,不进行其它操作,则可用此方法.若进行其它操作,如放大、缩小图像,则此方法实现较复杂.

复制代码 代码如下:

2 使用Microsoft提供的Matrix对象

示例代码:

复制代码 代码如下:

测试结果：chrome下效果正常，但旋转后img对象变为canvas对象；ie8下效果正常，旋转后img对象Matrix() ist eine img-Datei需较多计算。

3 使用Microsoft提供的BasicImage对象

示例代码:

复制代码 代码如下:

="text/html; charset=UTF-8" />

baidu.com/img/logo-yy.gif" />





Ergebnis: Unter Chrome ist keine Drehung möglich; der Effekt ist unter IE8 normal und das IMG-Objekt ist nach der Drehung immer noch ein IMG-Objekt. BasicImage() hat nur einen Parameter.

Wenn Sie sich die Codes dieser drei Methoden ansehen, werden Sie feststellen, dass es sich im Wesentlichen um eine Lösung handelt: Verwendung des Canvas-Objekts unter Chrome und Verwendung von VML oder Matrix() oder BasicImage() unter ie8. Ich habe kürzlich eine Komponente renoviert: Dabei geht es um das Drehen und Vergrößern von Bildern. Da jQueryRotate.js unter IE8 ein neues Objekt generiert, ist eine spezielle Verarbeitung erforderlich, wenn ein Bild vor dem Vergrößern ausgewählt wird. Schließlich wurde beschlossen, Chrome und ie8 getrennt zu behandeln, um es unter Chrome zu implementieren, und BasicImage() wurde unter ie8 verwendet, um die Einfachheit und Lesbarkeit des Codes sicherzustellen.