Js to achieve three methods of image rotation

  • 2020-03-30 02:36:54
  • OfStack

1 USES the jqueryrot.js implementation

Sample code:
 
<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
#div1 { 
width: 800px; 
height: 600px; 
background-color: #ff0; 
position: absolute; 
} 
.imgRotate { 
width: 100px; 
height: 80px; 
position: absolute; 
top: 50%; 
left: 50%; 
margin: -40px 0 0 -50px; 
} 
</style> 
</head> 
<body> 
<div id="div1"> 
<img id="img1" class="imgRotate" src="http://www.baidu.com/img/logo-yy.gif" /> 
<input id="input2" type="button" value="btn2"></input> 
</div> 
</body> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jQueryRotate.js"></script> 
<script type="text/javascript"> 
var num = 0; 
$("#input2").click(function(){ 
num ++; 
$("#img1").rotate(90*num); 
}); 
</script> 
</html> 

Test results: the effect under chrome is normal, the img object is still img object after rotation; Ie8 under the effect is normal, but after the rotation of the img object into the following object, due to object changes, if the rotation is still the original method to get img object, js error will be reported. To get an image object, you can get it by class. This method is used if the image is rotated and no other operations are performed. If other operations, such as zooming in and out of the image, then this method is more complex.
 
<span ...> 
<rvml:group class="rvml"...> 
<rvml:image class="rvml".../> 
</rvml:group> 
</span> 

Use the Matrix object provided by Microsoft

Sample code:
 
<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
#div1 { 
width: 800px; 
height: 600px; 
background-color: #ff0; 
position: absolute; 
} 
.imgRotate { 
width: 100px; 
height: 100px; 
position: absolute; 
top: 50%; 
left: 50%; 
margin: -50px 0 0 -50px; 
} 
#imgRotate { 
width: 100px; 
height: 100px; 
position: absolute; 
top: 50%; 
left: 50%; 
margin: -50px 0 0 -50px; 
} 
</style> 
</head> 
<body> 
<div id="div1"> 
<img id="img1" class="imgRotate" src="http://www.baidu.com/img/logo-yy.gif" /> 
<input id="input1" type="button" value="btn1"></input> 
</div> 
</body> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript"> 
function rotate(id,angle,whence) { 
var p = document.getElementById(id); 

// we store the angle inside the image tag for persistence 
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; 
} 

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 rotateRight(id,angle) { 
rotate(id,angle==undefined?90:angle); 
} 

function rotateLeft(id,angle) { 
rotate(id,angle==undefined?-90:-angle); 
} 
$("#input1").click(function(){ 
$("img.imgRotate").attr("id","imgRotate"); 
rotateLeft("imgRotate",90); 
$("#imgRotate").attr("top","50%"); 
$("#imgRotate").attr("left","50%"); 
$("#imgRotate").attr("margin","-50px 0 0 -50px"); 
}); 
</script> 
</html> 

Test results: the effect is normal in chrome, but the img object becomes a canvas object after rotation; Ie8 under the effect is normal, after the rotation of img object is still img object. There are many parameters of Matrix(), and more calculations are needed when used.

Use the BasicImage object provided by Microsoft

Sample code:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
</head> 
<body> 
<img id="image" src="http://www.baidu.com/img/logo-yy.gif" /> 
<input id="input2" type="button" value="btn2"></input> 
</body> 
<script type="text/javascript" src="jquery.min.js"></script> 

<script type="text/javascript"> 
var num = 0; 
$("#input2").click(function(){ 
num = (num + 1) % 4; 
document.getElementById('image').style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+num+')'; 
}); 
</script> 
</html> 

Results: chrome cannot be rotated; Ie8 under the effect is normal, after the rotation of img object is still img object. BasicImage() takes only one parameter.

If you look at the code for these three methods, you'll see that they are essentially a solution: canvas object implementation in chrome and VML or Matrix() or BasicImage() implementation in ie8. I recently modified a component: it involves rotating and zooming in the image. Since jqueryrotate. js generates a new object under ie8, it requires special processing when selecting the image before zooming in. After the decision to separate chrome, ie8 processing, chrome using jQueryRotate implementation, ie8 using BasicImage() implementation, to ensure the code simplicity and readability.

Related articles: