圖片旋轉總結

之前有做過一個瀏覽器上看到的圖片效果不正，需要旋轉圖片，於是就做了一下圖片的旋轉功能，圖片旋轉分成兩個步驟。
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的時候出錯啦");
        }

就這樣，圖片在瀏覽器上的旋轉，和實際圖片的物理旋轉都實現了，感覺麼麼噠！