日期:2014-05-16 浏览次数:20565 次
<html>
<head>
</head>
<body>
<div style="text-align:center;"><input type=button value="旋转图片" onclick="rotate(document.getElementById('_picview'));"/></div>
<div>
<img src="http://imgsrc.baidu.com/forum/pic/item/4d2a62d0f703918f7b682dac503d269759eec42c.jpg" id="_picview" width=680 height=860/>
</div>
</body>
</html>
<script language="javascript">
var isIE = (document.all) ? 1 : 0;
alert(isIE);
var i = 1;
function rotate(image) {
var object = image.parentNode;
if (isIE==1) {
image.style.filter = "progid:dXImagetransform.Microsoft.basicImage(rotation=" + i + ")";
i++;
if (i > 4) { i = 1 };
}
else {
try {
var canvas = document.createElement('canvas');
if (canvas.getContext("2d")) {
object.replaceChild(canvas, image);
var context = canvas.getContext("2d");
context.translate(176, 0);
context.rotate(Math.PI * 0.5);
context.drawImage(image, 0, 0);
}