图片旋转

最新推荐文章于 2022-12-16 16:22:21 发布

xiaofengxiaoling

最新推荐文章于 2022-12-16 16:22:21 发布

阅读量383

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/xiaofengxiaoling/article/details/8266154

版权

java 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

 html 5 canvas  tag 
  canvas. getContext("2d");
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"></meta>
<script type="text/javascript">
	function rotate(direction){
		var img = document.getElementById('img');
		if(!img || !direction)return false;
		var stepNum = img.getAttribute('step');
		if(stepNum == null)stepNum=0;
		if(direction=='left'){//逆时针减一
			stepNum==0 ? stepNum=3 : stepNum--;
		}else if(direction=='right'){//顺时针加
			stepNum==3?stepNum=0:stepNum++;
		}
		img.setAttribute('step',stepNum);
		var canv = document.getElementById('canv');
		var ctx = canv.getContext('2d');
		if(canv)img.style.visibility = 'hidden'; img.style.position='absolute';
		switch(stepNum) {
			default:
			case 0 :
				canv.setAttribute('width',img.width);
				canv.setAttribute('height',img.height);
				ctx.rotate(0 * Math.PI / 180);
				ctx.drawImage(img,0,0);
				break;
			case 1:
				canv.setAttribute('width',img.height);
				canv.setAttribute('height',img.width);
				ctx.rotate( 90 * Math.PI / 180);
				ctx.drawImage(img,0,-img.height);
				break;
			case 2:
				canv.setAttribute('width',img.width);
				canv.setAttribute('height',img.height);
				ctx.rotate( 180 * Math.PI / 180);
				ctx.drawImage(img,-img.width,-img.height);
				break;
			case 3:
				canv.setAttribute('width',img.height);
				canv.setAttribute('height',img.width);
				ctx.rotate( 270 * Math.PI / 180);
				ctx.drawImage(img,-img.width,0);
				break;
		}
	}
</script>
</head>
<body>
	<ul>
	  <li>
		<div >
			<button οnclick="rotate('left')">rotate left</button>
			<button οnclick="rotate('right')">rotate right</button>
		</div>
		<div >
			<img src="123.jpg" alt="ddddddd" id="img" style="width:130px;height:150px;"/>
			<canvas id="canv" style="width:130px;height:150px;" />
		</div>
	  </li>
	</ul>
</body>

</html>
<!--       IE 8   filter : -->
function rotate(o,p){ 
    var img = document.getElementById(o); 
    if(!img || !p) return false; 
    var n = img.getAttribute('step'); 
    if(n== null) n=0; 
    if(p=='right'){ 
        (n==3)? n=0:n++; 
    }else if(p=='left'){ 
        (n==0)? n=3:n--; 
    } 
    img.setAttribute('step',n); 
    //MSIE 
    if(document.all) { 
        img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')'; 
        //HACK FOR MSIE 8 
        switch(n){ 
            case 0: 
                img.parentNode.style.height = img.height; 
                break; 
            case 1: 
                img.parentNode.style.height = img.width; 
                break; 
            case 2: 
                img.parentNode.style.height = img.height; 
                break; 
            case 3: 
                img.parentNode.style.height = img.width; 
                break; 
        } 
    //DOM 
    }
}

xiaofengxiaoling

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片旋转

html 5 canvas tag canvas. getContext("2d"); function rotate(direction){ var img = document.getElementById('img'); if(!img || !direction)return false; var stepNum = img.getAttribute('st
复制链接

扫一扫