자바스크립트 이미지 회전, Image Rotate with CANVAS
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>rotate()</title>
<style type="text/css" media="screen">
img, canvas { border: 1px solid black; }
</style>
<script type="text/javascript">
function rotate(p_deg) {
if(d0cument.getElementById('canvas')) {
/*
Ok!: Firefox 2, Safari 3, Opera 9.5b2
No: Opera 9.27
*/
var image = d0cument.getElementById('image');
var canvas = d0cument.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 = d0cument.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;
};
};
};
window.onload = function() {
var image = d0cument.getElementById('image');
var canvas = d0cument.getElementById('canvas');
if(canvas.getContext) {
image.style.visibility = 'hidden';
image.style.position = 'absolute';
} else {
canvas.parentNode.removeChild(canvas);
};
rotate(0);
};
</script>
</head>
<body>
<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.com/intl/en_ALL/images/logo.gif" alt="" />
<canvas id="canvas"></canvas>
</p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>rotate()</title>
<style type="text/css" media="screen">
img, canvas { border: 1px solid black; }
</style>
<script type="text/javascript">
function rotate(p_deg) {
if(d0cument.getElementById('canvas')) {
/*
Ok!: Firefox 2, Safari 3, Opera 9.5b2
No: Opera 9.27
*/
var image = d0cument.getElementById('image');
var canvas = d0cument.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 = d0cument.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;
};
};
};
window.onload = function() {
var image = d0cument.getElementById('image');
var canvas = d0cument.getElementById('canvas');
if(canvas.getContext) {
image.style.visibility = 'hidden';
image.style.position = 'absolute';
} else {
canvas.parentNode.removeChild(canvas);
};
rotate(0);
};
</script>
</head>
<body>
<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.com/intl/en_ALL/images/logo.gif" alt="" />
<canvas id="canvas"></canvas>
</p>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 오른족 버튼 눌렀을때 뜨는 contextMenu (0) | 2009.01.30 |
|---|---|
| WebBrowser에서 ContextMenu, 특수키 막은 사이트 풀기. (0) | 2009.01.30 |
| 클립보드 복사 기능 구현을 위한 소스 코드 (0) | 2009.01.19 |
| 동적 HTML 객체 모델 요소의 위치와 면적 계산 (0) | 2009.01.12 |
| 자바스크립트, 모서리가 둥근 테이블 만들기. (0) | 2009.01.12 |
