js實作圖片旋轉的三種方法_javascript技巧

1 使用jQueryRotate.js實作

範例程式碼：

複製程式碼程式碼如下：

複製程式碼

程式碼



標題>

#div1 {
寬度：800px ;
高度：600px;
背景顏色：#ff0;
位置：絕對;
}
.imgRotate {
寬度：100px;
高度：80px； >位置：絕對；
頂部：50%;
左：50%；
邊距：-40px 0 0 -50px;
}
風格>
頭>

>

身體>



var num = 0;
$("#input2").click(function(){
num ;
$("#img1") .rotate(90*num);
});
腳本>

測試結果：chrome下效果正常，旋轉後img物件下面仍然為img對象；ie8下效果正常，但旋轉後img對象變成對象，由於對象變化，若旋轉後仍按原來方法獲取img對象，東南報js錯誤。欲取得影像對象，可依類別取得。如果影像旋轉後，不進行其他操作，則可用此方法。若進行影像其他操作，如放大、縮小，可用此方法

複製程式碼

程式碼如下：

;

;
:group>

2 使用Microsoft提供的Matrix物件

範例程式碼：

複製程式碼

程式碼如下：

標題>

#div1 {
寬度：800px ;
高度：600px;
背景顏色：#ff0;
位置：絕對;
}
.imgRotate {
寬度：100px;
高度：100px； >位置：絕對;
頂部：50%;
左：50%；
邊距：-50px 0 0 -50px;
}
#imgRotate {
寬度：100px ;
高度：100px;
位置：絕對;
頂部：50%；
左：50%;
邊距：-50px 0 0 -50px；
}
}
樣式>
頭>

>

身體>


函數旋轉(id,角度,whence) {
var p = document.getElementById(id);

// 我們將角度儲存在圖片標籤內以實現持久化
if (!whence) {
p.angle = ((p.angle==undefined?0:p.angle) angle ) ％360;
} else {
p.angle = 角度；
}
}
}

if (p.angle >= 0) {
var 旋轉= Math.PI * p.angle / 180;
} else {
var 旋轉= Math.PI * (360 p.angle ) / 180;
}
var costheta = Math.cos(旋轉);
var sintheta = Math.sin(旋轉);

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= '自動擴充')";
} 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.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 context.translate(sintheta*canvas.oImage.height,0);
} else if (rotation context.translate(canvas .width,-costheta*canvas.oImage.height);
} else if (rotation context.translate(-costheta*canvas.oImage.width,canvas.height) ;
} else {
context.translate(0,-sintheta*canvas.oImage.width);
}
context.rotate(旋轉);
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);
}

函數rotateRight(id,angle) {
旋轉(id,angle==undefined?90:angle );
}

函數rotateLeft(id,角度) {
旋轉(id,角度==未定義？ -90:-角度);
}
$("#input1").click(function(){
$("img.imgRotate").attr("id","imgRotate") ;
rotateLeft(" imgRotate",90);
$("#imgRotate").attr("頂部","50%");
$("#imgRotate").attr("左","50%" );
$("#imgRotate").attr("邊距","-50px 0 0 -50px");
腳本>

測試結果：chrome下效果正常，但旋轉後img物件變成canvas物件；ie8下效果正常，旋轉後img物件仍為img物件。

3 使用微軟提供的BasicImage對象

示例代碼：

複製代碼

代碼如下：

測試結果：chrome下不能旋轉；ie8下效果正常，旋轉後img物件仍為img物件。 BasicImage()僅一個參數。

查看這三種方法的程式碼會發現，本質上是一種解決方案：chrome下使用canvas物件實現，ie8下使用VML或Matrix()或BasicImage()實作。本人近期改造一個組件：其中涉及到旋轉、放大圖片，由於jQueryRotate.js在ie8下會產生一個新的對象，導致放大圖片前選擇圖片時，需要進行特殊處理。後來決定對chrome、ie8分開處理，chrome下使用jQueryRotate實現，ie8下使用BasicImage()實現，保證了程式碼的簡潔性和可讀性。