用Javascript来旋转图像，IE和Firefox都可以_js写的图片拖动旋转功能,ie浏览器支持吗?-优快云博客

本文提供了一段使用HTML5 Canvas API和IE特有的滤镜效果实现图片旋转的JavaScript代码。该代码能够兼容Firefox、Safari、Opera（部分版本）及MSIE6和7等浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

摘抄其他网站并自己整理过，以分享。

<html>

<body>

<script>

/* This script and many more are available free online at

The JavaScript Source!! http://javascript.internet.com

Created by: Benoit Asselin | http://www.ab-d.fr */



function rotate(p_deg) {

	if(document.getElementById('canvas')) {

		/*

		Ok!: Firefox 2, Safari 3, Opera 9.5b2

		No: Opera 9.27

		*/

		var image = document.getElementById('image');

		var canvas = document.getElementById('canvas');

		var canvasContext = canvas.getContext('2d');

		

		switch(p_deg) {

			default :

			case 0 :

				canvas.setAttribute('width', image.width);

				canvas.setAttribute('height', image.height);

				canvasContext.rotate(p_deg * Math.PI / 180);

				canvasContext.drawImage(image, 0, 0);

				break;

			case 90 :

				canvas.setAttribute('width', image.height);

				canvas.setAttribute('height', image.width);

				canvasContext.rotate(p_deg * Math.PI / 180);

				canvasContext.drawImage(image, 0, -image.height);

				break;

			case 180 :

				canvas.setAttribute('width', image.width);

				canvas.setAttribute('height', image.height);

				canvasContext.rotate(p_deg * Math.PI / 180);

				canvasContext.drawImage(image, -image.width, -image.height);

				break;

			case 270 :

			case -90 :

				canvas.setAttribute('width', image.height);

				canvas.setAttribute('height', image.width);

				canvasContext.rotate(p_deg * Math.PI / 180);

				canvasContext.drawImage(image, -image.width, 0);

				break;

		};

		

	} else {

		/*

		Ok!: MSIE 6 et 7

		*/

		var image = document.getElementById('image');

		switch(p_deg) {

			default :

			case 0 :

				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';

				break;

			case 90 :

				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';

				break;

			case 180 :

				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';

				break;

			case 270 :

			case -90 :

				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';

				break;

		};

		

	};

};



// Multiple onload function created by: Simon Willison

// http://simonwillison.net/2004/May/26/addLoadEvent/

function addLoadEvent(func) {

  var oldonload = window.onload;

  if (typeof window.onload != 'function') {

    window.onload = func;

  } else {

    window.onload = function() {

      if (oldonload) {

        oldonload();

      }

      func();

    }

  }

}



addLoadEvent(function() {

	var image = document.getElementById('image');

	var canvas = document.getElementById('canvas');

	if(canvas.getContext) {

		image.style.visibility = 'hidden';

		image.style.position = 'absolute';

	} else {

		canvas.parentNode.removeChild(canvas);

	};

	

	rotate(0);

});



</script>

<div>代码来自于：http://javascript.internet.com/image-effects/image-rotate-with-canvas.html 整理08-07-12</div>

<p>

	rotate:

	<input type="button" value="0°" onclick="rotate(0);">

	<input type="button" value="90°" onclick="rotate(90);">

	<input type="button" value="180°" onclick="rotate(180);">

	<input type="button" value="-90°" onclick="rotate(-90);">

</p>

<p>

	<img id="image" src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="">

	<canvas id="canvas"></canvas>

</p>

</body>

</html>

下载演示地址: http://download.youkuaiyun.com/source/536226

在线演示

代码来自于：http://javascript.internet.com/image-effects/image-rotate-with-canvas.html 整理08-07-12

rotate: