Web前端_图片旋转

来源：互联网发布：网线淘宝编辑：程序博客网时间：2024/05/06 12:35

项目中用到了这样的东东

先声明一下，以下代码来自以下网址：简明现代魔法

http://www.nowamagic.net/javascript/js_ImageRotation.php

在看之前，可以先了解一下IE的滤镜：

progid:DXImageTransform.Microsoft.Matrix

progid:DXImageTransform.Microsoft.AlphaImageLoader

另外JQuery的一个专门旋转图片的插件地址：

http://jquery-rotate.googlecode.com/files/jquery.rotate.1-1.js

代码如下：以下效果在chrome、firefox、opera、safari、IE6上测试都通过了。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>JavaScript图片旋转</title> <!--说明一下，下面这个样式是不能省略的，佛则在IE中是无法通过的，因为IE是用的滤镜。--><style type="text/css">#demo { cursor:pointer; position:absolute;filter:progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand");}</style></head> <body><div id="container" style="width:520px;height:280px;position:relative;margin:0 auto"><div id="demo" align="center"><img src="1.jpg" width="520" height="280" /></div></div></body><script>var Img = function() {var T$ = function(id) { return document.getElementById(id); }var ua = navigator.userAgent,isIE = /msie/i.test(ua) && !window.opera;var i = 0, sinDeg = 0, cosDeg = 0, timer = null ;var rotate = function(target, degree) {target = T$(target);var orginW = target.clientWidth, orginH = target.clientHeight;clearInterval(timer);function run(angle) {if (isIE) { // IEcosDeg = Math.cos(angle * Math.PI / 180);sinDeg = Math.sin(angle * Math.PI / 180);with(target.filters.item(0)) {M11 = M22 = cosDeg; M12 = -(M21 = sinDeg); }target.style.top = (orginH - target.offsetHeight) / 2 + 'px';target.style.left = (orginW - target.offsetWidth) / 2 + 'px';} else if (target.style.MozTransform !== undefined) {  // Mozillatarget.style.MozTransform = 'rotate(' + angle + 'deg)';} else if (target.style.OTransform !== undefined) {   // Operatarget.style.OTransform = 'rotate(' + angle + 'deg)';} else if (target.style.webkitTransform !== undefined) { // Chrome Safaritarget.style.webkitTransform = 'rotate(' + angle + 'deg)';} else {target.style.transform = "rotate(" + angle + "deg)";}}<!--这里是用了定时器调用run方法，当然，如果不需要旋转的动态效果可以直接调用run方法而不用定时器，从而达到让图片旋转任意角度的效果-->timer = setInterval(function() {i += 10;run(i);if (i > degree - 1) {i = 0;clearInterval(timer);} }, 10); }return {rotate: rotate}}();window.onload = function() {Img.rotate('demo', 360);document.getElementById('demo').onclick = function() {Img.rotate('demo', 360);}}</script></html>

下面看一下JQuery的插件是咋写的，用的canvas、具体实现跟上面差不多，jquery.rotate.1-1.js代码如下：

jQuery.fn.rotate = function(angle,whence) {var p = this.get(0);// we store the angle inside the image tag for persistenceif (!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);}jQuery.fn.rotateRight = function(angle) {this.rotate(angle==undefined?90:angle);}jQuery.fn.rotateLeft = function(angle) {this.rotate(angle==undefined?-90:-angle);}

引入JQuery的js库就可以直接调用了：例如$('#test').rotateRight(30);

其中的test是是要旋转的图片的id，这里30表示30度。