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.


Related articles: