图片旋转总结

之前有做过一个浏览器上看到的图片效果不正，需要旋转图片，于是就做了一下图片的旋转功能，图片旋转分成两个步骤。
1. 浏览器上先旋转，看效果 ； 2，确定旋转角度，后台原图片旋转。

那就先来说说浏览器上如何旋转图片吧：

首先，看看样式

.imgtest1{
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -o-transform:rotate(90deg);
   
}
.imgtest2{
    -moz-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
   
}
.imgtest3{
    -moz-transform:rotate(270deg);
    -ms-transform:rotate(270deg);
    -webkit-transform:rotate(270deg);
    -o-transform:rotate(270deg);
   
}
.imgtest4{
    -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
   
}

接下来就是点击旋转按钮的事件啦，因为360度每次转90度，第四次的时候就回到原点了，所以用 取余的方式来判断要旋转的角度

if(i%4==1){
         if(i>4){
         $(Img).removeClass("imgtest4");
         }
         $(Img).addClass("imgtest1");
         degree=90;
         // Img.style.MozTransform="rotate(90deg)";
        }
        else if(i%4==2){
          $(Img).removeClass("imgtest1");
          $(Img).addClass("imgtest2");
          degree=180;
         // Img.style.MozTransform="rotate(180deg)";
        }
        else if(i%4==3){
          $(Img).removeClass("imgtest2");
          $(Img).addClass("imgtest3");
          degree=270;
          // Img.style.MozTransform="rotate(270deg)";
        }
        else{
          $(Img).removeClass("imgtest3");
          $(Img).addClass("imgtest4");
          degree=0;
           //Img.style.MozTransform="rotate(360deg)";
        }

以上方式，就可以在浏览器上看到图片旋转的效果了，而且支持了多浏览器的旋转哦，四个主流的浏览器： 谷歌，火狐，欧朋，还有苹果的浏览器！

浏览器上的效果有了之后，就是后台真正的图片旋转了，百度了一个有用的图片旋转类：
package com.erke.utils;
import java.awt.Graphics2D; 
import java.awt.Image; 
import java.awt.Rectangle; 
import java.awt.RenderingHints;
import java.awt.image.BufferedImage;
import java.awt.Dimension; 
 
public class RotateImage {  //图片旋转
 
    public static BufferedImage Rotate(Image src, int angel) {   //传进来图片的路径，和旋转的角度，好像只能是90度90度这样旋转
        int src_width = src.getWidth(null); 
        int src_height = src.getHeight(null); 
        // calculate the new image size 
        Rectangle rect_des = CalcRotatedSize(new Rectangle(new Dimension( 
                src_width, src_height)), angel); 
 
        BufferedImage res = null; 
        res = new BufferedImage(rect_des.width, rect_des.height, 
                BufferedImage.TYPE_INT_RGB); 
        Graphics2D g2 = res.createGraphics(); 
        // transform 
        g2.translate((rect_des.width - src_width) / 2, 
                (rect_des.height - src_height) / 2); 
        g2.rotate(Math.toRadians(angel), src_width / 2, src_height / 2); 
 
        g2.drawImage(src, null, null); 
        return res; 
    } 
 
    public static Rectangle CalcRotatedSize(Rectangle src, int angel) { 
        // if angel is greater than 90 degree, we need to do some conversion 
        if (angel >= 90) { 
            if(angel / 90 % 2 == 1){ 
                int temp = src.height; 
                src.height = src.width; 
                src.width = temp; 
            } 
            angel = angel % 90; 
        } 
 
        double r = Math.sqrt(src.height * src.height + src.width * src.width) / 2; 
        double len = 2 * Math.sin(Math.toRadians(angel) / 2) * r; 
        double angel_alpha = (Math.PI - Math.toRadians(angel)) / 2; 
        double angel_dalta_width = Math.atan((double) src.height / src.width); 
        double angel_dalta_height = Math.atan((double) src.width / src.height); 
 
        int len_dalta_width = (int) (len * Math.cos(Math.PI - angel_alpha 
                - angel_dalta_width)); 
        int len_dalta_height = (int) (len * Math.cos(Math.PI - angel_alpha 
                - angel_dalta_height)); 
        int des_width = src.width + len_dalta_width * 2; 
        int des_height = src.height + len_dalta_height * 2; 
        return new java.awt.Rectangle(new Dimension(des_width, des_height)); 
    } 
   
   
    /**
     * 旋转图片的另一种方法  //该方法图片会有黑边出现，有点危险
     * @param bufferedimage
     * @param degree
     * @return
     */
    public static BufferedImage rotateImage(final BufferedImage bufferedimage,
            final int degree) {
        int w = bufferedimage.getWidth();
        int h = bufferedimage.getHeight();
        int type = bufferedimage.getColorModel().getTransparency();
        BufferedImage img;
        Graphics2D graphics2d;
        (graphics2d = (img = new BufferedImage(w, h, type))
                .createGraphics()).setRenderingHint(
                RenderingHints.KEY_INTERPOLATION,
                RenderingHints.VALUE_INTERPOLATION_BILINEAR);
        graphics2d.rotate(Math.toRadians(degree), w / 2, h / 2);
        graphics2d.drawImage(bufferedimage, 0, 0, null);
        graphics2d.dispose();
        return img;
    }
}


有了这个工具类，就可以去获取图片来旋转了，代码如下：

        try{
             src = ImageIO.read(new File(urlpath)); //从路径中读取到这张图片
         
        }catch(Exception e){
             log.error("read的时候出错啦");
        }
         try{
        BufferedImage des = RotateImage.Rotate(src, degree);  //调用图片旋转的函数，返回des就是旋转后的图片
        
        ImageIO.write(des, "jpg", new File(urlpath));  //把旋转后的图片写回到原先的地址，相当于覆盖原图片啦
        }catch(Exception e){
            log.error("write的时候出错啦");
        }

就这样，图片在浏览器上的旋转，和实际图片的物理旋转都实现了，感觉么么哒！