3 Solutions to Rotate Pictures_The Basics-JS Tutorial-php.cn

3 Solutions to Rotate Pictures_The Basics

WBOY

Release： 2016-05-16 17:13:21

Original

1081 people have browsed it

Research on the Image Rotation Effect
Recently, I needed to do the image rotation function in my project, so I did some research. Let’s summarize the support of image rotation in various browsers

1. Image rotation plan

1) CSS3 implements image rotation function: supported browsers are chrome and firefox; opera is not supported.

The specific code is: -moz-transfrom:rotate(90deg);-webkit-ransfrom:rotate(90deg);
The above code means to rotate the image 90 degrees clockwise. In fact, it can be rotated to any degree. However, the only browsers that support CSS3 are chrome, firefox3.6, safari, and ie browsers do not support it. So how to deal with it in IE
? So we have the following solution

2) Rotate through filters in IE

The specific code is: filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
The rotation parameter here can be 0,1,2,3, which means that these numbers are multiplied by 90 Rotation angle. If you want to rotate to any angle under IE, you need to use a matrix transformation filter. In our daily use,
most of us use transformations that are multiples of 90. We won’t discuss arbitrary angles here. But there is still a problem. If the browser is not Internet Explorer and does not support CSS3, then if you realize the rotation of the image, the canvas can also rotate the image.

3) Use canvas to rotate images

Canvas is supported in chrome, firefox, opera and other browsers. It has a drawing API based on JavaScript. First, let’s take a look at how to use canvas JavaScript to rotate images

The code is as follows:

Copy the codeThe 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, then draws the image into the canvas, stores it, and then
hides the previous image. This method is relatively smooth to implement.

2. Comparison of various solutions

The implementation of css3 will not change the size of the space occupied by the original image, but the filter under IE will change the space occupied by the image. The size of the space.
In fact, IE can also support canvas. You only need to quote a canvas script. This one is provided by Google. But this script is a bit big, more than 20k before compression
I prefer to use filters under IE, and other browsers to use the canvas tag.