Three ways to achieve image rotation with js_javascript skills

1 使用jQueryRotate.js实现

示例代码：

复制代码 代码如下:

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

复制代码 代码如下:

2 使用Microsoft提供的Matrix对象

示例代码：

复制代码 代码如下:

测试结果：chrome下效果正常，但旋转后img对象变为canvas对象；ie8下效果正常，旋转后img对象仍为img对象。Matrix()参数较多，使用时需较多计算。

3 使用Microsoft提供的BasicImage对象

示例代码：

复制代码 代码如下:

Test Result: Rotation cannot be done under chrome; the effect is normal under ie8, and the img object is still an img object after rotation. BasicImage() has only one parameter.

Looking at the codes of these three methods, you will find that it is essentially a solution: using the canvas object under chrome, and using VML or Matrix() or BasicImage() under ie8. I recently renovated a component: it involves rotating and enlarging images. Since jQueryRotate.js will generate a new object under IE8, special processing is required when selecting an image before enlarging it. Finally, it was decided to handle chrome and ie8 separately. jQueryRotate was used to implement it under chrome, and BasicImage() was used under ie8 to ensure the simplicity and readability of the code.