JS利用Canvas，跨浏览器实现图片旋转效果

目的：
对图片进行90、180、270度的旋转，便于浏览照片。

实现方法：
1.IE浏览器，使用BasicImage滤镜

filter : progid:DXImageTransform.Microsoft.BasicImage ( enabled=bEnabled ,
grayScale=bGray , mirror=bMirror , opacity=fOpacity , XRay=bXRay )

Rotation:可读写。整数值(Integer)。设置或检索对象内容的旋转。0 | 1 | 2 | 3

• 0:默认值。内容不旋转。
• 1:内容旋转90度。
• 2:内容旋转180度。
• 3:内容旋转270度。

_this._img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(Rotation='
                                                           + _this.r + ')';

2.其它标准浏览器(FireFox,Chrome,Safari,Opera)都支持Canvas，利用Canvas的rotate以及drawImage对图片进行旋转。

mozilla的Canvas文档：https://developer.mozilla.org/En/Canvas_tutorial

首先，将图片替换成Canvas

var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
canvas.setAttribute('width',this._img.width);
canvas.setAttribute('height',this._img.height);
ctx.drawImage(this._img,0,0);
this._ghost = this._img;
this._img.parentNode.replaceChild(canvas,this._img);
this._img = canvas;

旋转的功能代码：

switch (_this.r){
	case 0:
		_this._img.setAttribute('width',_this._ghost.width);
		_this._img.setAttribute('height',_this._ghost.height);
		ctx.drawImage(_this._ghost,0,0);
		break;
	case 1:
		_this._img.setAttribute('width',_this._ghost.height);
		_this._img.setAttribute('height',_this._ghost.width);
		ctx.rotate(90*Math.PI/180);
		ctx.drawImage(_this._ghost,0,-_this._ghost.height);
		break;
	case 2:
		_this._img.setAttribute('width',_this._ghost.width);
		_this._img.setAttribute('height',_this._ghost.height);
		ctx.rotate(180*Math.PI/180);
		ctx.drawImage(_this._ghost,-_this._ghost.width,
                                                      -_this._ghost.height);
		break;
	case 3:
		_this._img.setAttribute('width',_this._ghost.height);
		_this._img.setAttribute('height',_this._ghost.width);
		ctx.rotate(270*Math.PI/180);
		ctx.drawImage(_this._ghost,-_this._ghost.width,0);
		break;
}

预览效果，完整代码提供打包下载：

Demo地址：JS旋转图片Demo
Demo下载地址：JS旋转图片