JS实现图片旋转三种方法.doc

1 使用jQueryRotate.js实现 示例代码： 复制代码 代码如下: #div1 width: 800px; height: 600px; background-color: #ff0; position: absolute; .imgRotate width: 100px; height: 80px; position: absolute; top: 50%; left: 50%; margin: -40px 0 0 -50px; var num = 0; $(#input2).click(function() num +; $(#img1).rotate(90*num); ); 测试结果：chrome下效果正常，旋转后img对象仍为img对象；ie8下效果正常，但旋转后img对象变为下面对象，由于对象变化，若旋转后仍按原来方法获取img对象，则会报js错误。欲获取image对象，可根据class获取。如果图像旋转后，不进行其它操作，则可用此方法。若进行其它操作，如放大、缩小图像，则此方法实现较复杂。 复制代码 代码如下: 2 使用Microsoft提供的Matrix对象 示例代码： 复制代码 代码如下: #div1 width: 800px; height: 600px; background-color: #ff0; position: absolute; .imgRotate width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; #imgRotate width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; function rotate(id,angle,whence) var p = document.getElementById(id); / we store the angle inside the image tag for persistence if (!whence) p.angle = (p.angle=undefined?0:p.angle) + angle) % 360; else p.angle = angle; if (p.angle = 0) var rotation = Math.PI * p.angle / 180; else var rotation = Math.PI * (360+p.angle) / 180; var costheta = Math.cos(rotation); var sintheta = Math.sin(rotation); if (document.all & !window.opera) var canvas = document.createElement(img); canvas.src = p.src; canvas.height = p.height; canvas.width = p.width; canvas.style.filter = progid:DXImageTransform.Microsoft.Matrix(M11=+costheta+,M12=+(-sintheta)+,M21=+sintheta+,M22=+costheta+,SizingMethod=auto expand); else var canvas = document.createElement(canvas); if (!p.oImage) 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); $(#input1).click(function() $(img.imgRotate).attr(id,imgRotate); rotateLeft(imgRotate,90); $(#imgRotate).attr(top,50%); $(#imgRotate).attr(left,50%); $(#imgRotate).attr(margin,-50px 0 0 -50px); ); 测试结果：chrome下效果正常，但旋转后img对象变为canvas对象；ie8下效果正常，旋转后img对象仍为img对象。Matrix()参数较多，使用时需较多计算。 3 使用Microsoft提供的BasicImage对象 示例代码： 复制代码 代码如下: var num = 0; $(#input2).click(function() num = (num + 1) % 4; document.getElementById(image).style.filter = progid:DXImageTransform.Microsoft.BasicImage(rotation=+num+); ); 测试结果：chrome下不能旋转；ie8下效果正常，旋转后img对象仍为img对象。BasicImage()仅一个参数。 查看这三种方法的代码会发现，本质上是一种解决方案：chrome下使用canvas对象实现，ie8下使用VML或者Matrix()或B