Three solutions for rotating images
- 2020-03-29 23:56:24
- OfStack
One, picture rotation scheme
2) rotate through the filter under IE
3) use canvas to rotate the picture
The code is as follows:
var test = function(){
var canvas = document.getElementById("result");
var oImg = document.getElementById("Img");
canvas.height = 300;
canvas.width = 200;
var context = canvas.getContext("2d");
context.save();
context.translate(200,0);
context.rotate(Math.PI/3);
context.drawImage(oImg, 0, 0, 300, 200);
context.restore();
oImg.style.display = "none";
};
The above code first gets a canvas object, then sets its height and starts drawing. This changes the center point and rotation Angle of the canvas, and then draws the picture into the canvas, stores it, and then
Hide the previous image. The implementation of this method is relatively smooth.