图片旋转-水平旋转-垂直旋转

        web开发中，图片的常用的旋转操作处理。

        如图所示：

        css样式：

<style>
	body{padding:10px}
	dl,dt,dd{margin:0;padding:0;}
	.confirm-box canvas{
		transition: transform 0.6s ease-out 0s;
		-moz-transition: transform 0.6s ease-out 0s;
		-webkit-transition: transform 0.6s ease-out 0s;
		-o-transition: transform 0.6s ease-out 0s;
	}
	.rotateX{
		transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		-o-transform: rotateY(180deg);
		-webkit-transform: perspective(2000px) translateZ(-1px) rotateY(180deg);
	}
	.rotateY{
		transform: rotateX(180deg);
		-moz-transform: rotateX(180deg);
		-o-transform: rotateX(180deg);
		-webkit-transform: perspective(2000px) translateZ(-1px) rotateX(180deg);
	}
	
</style>

        js函数：

<script>
	// rotation

	function rotate(elm, angle, whence) {
      	var p = elm;
      	if (!whence) 
      	{
        	p.angle = ((p.angle == undefined ? 0 : p.angle) + angle) % 360;
      	}
      	else 
      	{
        	p.angle = angle;
      	}
      	if (p.angle >= 0) 
      	{
        	var rotation = Math.PI * p.angle / 180;
     	}
      	else 
      	{
        	var rotation = Math.PI * (360 + p.angle) / 180;
     	}
      	var costheta = Math.cos(rotation);
      	var sintheta = Math.sin(rotation);
      	if (document.all && !window.opera) {
        	var canvas = document.createElement('img');
        	canvas.src = p.src;
        	canvas.height = p.height;
        	canvas.width = p.width;
        	canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + costheta + ",M12=" + (-sintheta) + ",M21=" + sintheta + ",M22=" + costheta + ",SizingMethod='auto expand')";
      	}
      	else 
      	{
        	var canvas = document.createElement('canvas');
        	if (!p.oImage) 
        	{
          		canvas.oImage = new Image();
          		canvas.oImage.src = p.src;
        	}
        	else 
        	{
          		canvas.oImage = p.oImage;
        	}
        	//alert(canvas.width)
        	canvas.style.width = canvas.width = Math.abs(costheta * canvas.oImage.width) + Math.abs(sintheta * canvas.oImage.height);
        	canvas.style.height = canvas.height = Math.abs(costheta * canvas.oImage.height) + Math.abs(sintheta * canvas.oImage.width);
        	var context = canvas.getContext('2d');
        	context.save();
        	if (rotation <= Math.PI / 2) {
          		context.translate(sintheta * canvas.oImage.height, 0);
        	}
        	else if (rotation <= Math.PI) 
        	{
          		context.translate(canvas.width, -costheta * canvas.oImage.height);
        	}
        	else if (rotation <= 1.5 * Math.PI) 
        	{
          		context.translate(-costheta * canvas.oImage.width, canvas.height);
        	}
        	else 
        	{
          		context.translate(0, -sintheta * canvas.oImage.width);
        	}
        	context.rotate(rotation);
        	context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);
        	context.restore();
      	}
      	canvas.id = p.id;
      	canvas.angle = p.angle;
      	p.parentNode.replaceChild(canvas, p);
    };
    
    function imgRotate(act, id){
		var box = $('#slide_' + id);

		if(act == 's'){
			rotate(document.getElementById('confirm-img-'+id), 90);
		}

		if(act == 'x'){
			box.find('img, canvas').removeClass('rotateY');
			box.find('img, canvas').toggleClass('rotateX');
		}

		if(act == 'y'){
			box.find('img, canvas').removeClass('rotateX');
			box.find('img, canvas').toggleClass('rotateY');
		}
	}
</script>

        html代码：

<table class="confirm-box">
    <tr>
        <td>
            <div id="slide_1" class="slides" style="display:block;">
                <div class="tools">
		    <input class="rotate-btn" type="button" onclick="imgRotate('s', 1)" value="旋转"/>
	            <input class="rotate-x-btn" type="button" onclick="imgRotate('x', 1)" value="水平翻转">
                    <input class="rotate-y-btn" type="button" onclick="imgRotate('y', 1)" value="垂直翻转">
							（翻转功能需IE10+浏览器）
		</div>
		<img id="confirm-img-1" src="./1.jpg">
	    </div>											
	</td>
    </tr>		
</table>

        demo链接：https://pan.baidu.com/s/1qN2pa6hZkU4W2Om-pOCk0w  提取码：qpwi 

本文为崔凯原创文章,转载无需和我联系,但请注明来自冷暖自知一抹茶ckhttp://www.cksite.cn

• 上一篇： 二维数组把某个字段的值提到key的位置
• 下一篇： Redis主从复制以及主从复制原理