JS实现图片旋转的三种方法(2)

canvas.oImage = new Image(); canvas.oImage.src = p.src; } else { canvas.oImage = p.oImage; } canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height); canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width); var context = canvas.getContext('2d'); context.save(); if (rotation <= Math.PI/2) { context.translate(sintheta*canvas.oImage.height,0); } else if (rotation <= Math.PI) { context.translate(canvas.width,-costheta*canvas.oImage.height); } else if (rotation <= 1.5*Math.PI) { context.translate(-costheta*canvas.oImage.width,canvas.height); } else { context.translate(0,-sintheta*canvas.oImage.width); } context.rotate(rotation); context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height); context.restore(); } canvas.id = p.id; canvas.angle = p.angle; p.parentNode.replaceChild(canvas, p); } function rotateRight(id,angle) { rotate(id,angle==undefined?90:angle); } function rotateLeft(id,angle) { rotate(id,angle==undefined?-90:-angle); } $(\ $(\ rotateLeft(\ $(\ $(\ $(\0 0 -50px\ });

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

3 使用Microsoft提供的BasicImage对象

示例代码：

复制代码 代码如下:

测试结果：chrome下不能旋转；ie8下效果正常，旋转后img对象仍为img对象。BasicImage()仅一个参数。

查看这三种方法的代码会发现，本质上是一种解决方案：chrome下使用canvas对象实现，ie8下使用VML或者Matrix()或BasicImage()实现。本人近期改造一个组件：其中涉及到旋转、放大图片，由于jQueryRotate.js在ie8下会生成一个新的对象，导致放大图片前选择图片时，需要进行特殊处理。后决定对chrome、ie8分开处理，chrome下使用jQueryRotate实现，ie8下使用BasicImage()实现，保证了代码的简洁性和可读性。