canvas反轉繪製圖片
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<style>
* {margin:0;padding:0;}
div.holder {width:500px;border:1px solid black;text-align:center;overflow:hidden;}
div.holder img {margin:0 auto;display:block;}
</style>
</head>
<body>
<div id="delegate">
<div class="holder">
<p>
<a class="turnleft" href="#">向左轉</a>
<a class="turnright" href="#">向右轉</a>
</p>
<div style="font-size:0px;">
<img src="http://ww1.sinaimg.cn/bmiddle/6087b519tw1din59omsdqj.jpg" />
</div>
</div>
</div>
<script type="text/javascript">
var maxWidth = 500;
window.onload = function() {
var delegate = document.getElementById('delegate');
var links = delegate.getElementsByTagName('a');
for(var i = 0 ; i < links.length ; i++) {
if((links[i].className + "").match(/\b(turnleft|turnright)\b/)) {
links[i].onclick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
rotate(target);
};
}
}
};
function findNext(target) {
var result = target , count = 0;
while(true) {
result = result.nextSibling;
count++;
if(result && result.nodeType == 1) {
break;
}
if(!result || count > 10) {
break;
}
}
return result;
}
function rotate(target) {
var clsName = target.className;
var img = findNext(target.parentNode).getElementsByTagName("IMG")[0];
var num = getAngle(img , clsName == 'turnleft' ? 'left' : 'right');
var ie = /msie/i.test(navigator.userAgent);
if(ie) {
img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + num + ')';
} else {
var canvas = img.parentNode.getElementsByTagName('canvas');
if(!canvas.length) {
canvas = document.createElement('canvas');
img.parentNode.appendChild(canvas);
} else {
canvas = canvas[0];
}
if(num % 2 == 0) {
canvas.width = img.width;
canvas.height = img.height;
} else {
canvas.width = img.height;
canvas.height = img.width;
}
var context = canvas.getContext('2d');
var arr = [[0,0] , [0,-img.height] , [-img.width ,-img.height] , [-img.width,0]];
context.rotate(num * Math.PI / 2);
context.drawImage(img , arr[num][0] , arr[num][1] , img.width , img.height);
img.style.display = 'none';
}
}
function resize(target , angle) {
var size = target.realSize;
if(!size) {
target.realSize = size = {
width : target.width,
height : target.height
};
}
if(angle % 2 == 0) {
target.width = size.width;
target.height = size.height;
} else {
if(size.height > maxWidth) {
target.height = maxWidth;
target.width = maxWidth * size.width / size.height;
} else {
target.width = size.width;
target.height = size.height;
}
}
}
function getAngle(target , type) {
var angle = target.angle || 0;
type == 'left' ? angle -= 90 : null;
type == 'right' ? angle += 90 : null;
Math.abs(angle) > 270 ? angle = 0 : null;
target.angle = angle;
angle /= 90;
if(angle < 0) {
angle = 4 + angle;
}
var isIe = /msie/i.test(navigator.userAgent);
resize(target , angle);
if(isIe) {
var marginLeft;
if(angle % 2 == 1) {
target.parentNode.style.height = target.width + 'px';
marginLeft = Math.floor((maxWidth - target.height) / 2);
} else {
target.parentNode.style.height = target.height + 'px';
marginLeft = Math.floor((maxWidth - target.width) / 2);
}
target.style.marginLeft = marginLeft + 'px';
}
return angle;
}
</script>
</body>
</html>