解决手机竖拍照片旋转90度问题

2018-03-24 16:26:55

903次阅读

0个评论

手机上传竖拍图片至服务器，会逆时针旋转90度，浏览器读取图片，显示的是选择后的图片。

有两种修正方法，1、java实现，在服务端修正图片角度，修正后传到浏览器显示。2、js实现，在前端修正图片角度，修正后在浏览器显示。可利用exif.js读取图片的拍摄信息后进行修正。在此，选择第一种方式java实现，在服务端对图片进行修正后，在浏览器显示。

照片的方向信息在图片文件的exif信息中，读取图片的exif信息，就能知道需要旋转的角度，那么读取图片的时候，把图片按角度旋转后，就能显示正常。要获取图片的exif信息，需要使用mediautil-1.0.jar、metadata-extractor-2.3.1.jar，需要用到Orientation属性，说明如下：

旋转角度	参数
0	1
顺时针90	6
逆时针90	8
180	3

前端代码：

<html>  
<head>  
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>  
    <script type="text/javascript">  
    $(function(){  
        //App是应用的根目录，getPicture是服务端处理请求端点  
    <span style="white-space:pre">    </span>$("#readImg").attr("src","/App/getPicture?name=20160310_210211199011165135_H.jpg"+"&"+Math.random());  
    });  
    </script>  
</head>  
<body>  
    <img id="readImg"/>  
</body>  
</html>

服务端代码：

import java.awt.Dimension;  
import java.awt.Graphics2D;  
import java.awt.Rectangle;  
import java.awt.image.BufferedImage;  
import java.io.FileInputStream;  
import java.io.OutputStream;  
import javax.imageio.ImageIO;  
  
@RequestMapping("/getPicture")  
@ResponseBody  
public void getPictureByName(String name,HttpServletRequest request,HttpServletResponse response){  
    try {  
        //name为前端请求图片名，如 a.jpg  
          
        BufferedImage src = getPicture( name );  
        BufferedImage  bi = null;  
          
        //图片存在  
        if(src != null){  
            //获取图片旋转角度  
            int angel = getRotateAngleForPhoto(name);  
            if(angel == 0){  
                //图片正常，不处理图片  
                bi = src;  
            }else{  
                //图片被翻转，调整图片  
                int src_width = src.getWidth(null);  
                int src_height = src.getHeight(null);  
                Rectangle rect_des = CalcRotatedSize(new Rectangle(new Dimension(src_width, src_height)), angel);  
                   
                bi = new BufferedImage(rect_des.width, rect_des.height,BufferedImage.TYPE_INT_RGB);  
                Graphics2D g2 = bi.createGraphics();  
  
                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);  
            }  
  
            int index = name.lastIndexOf(".");  
            String formate = name.substring(index+1);  
            OutputStream os = response.getOutputStream();  
            ImageIO.write(bi, formate, os);  
            os.close();  
        }else{  
            //图片不存在  
            logger.info("图片：" + name + "为空");  
        }  
    } catch (Exception e) {  
        e.printStackTrace();  
    }finally{  
    }  
}

/** 
* 读取指定图片 
*/  
public BufferedImage getPicture(String name) {  
    String path = "E:\\img\\";  
    BufferedImage bi = null;  
    try{  
        File file = new File(path + name);  
        if(!file.exists()){  
            return null;  
        }  
        bi = ImageIO.read(file);  
    } catch (Exception e){  
        e.printStackTrace();  
    }  
    return bi;  
}

/** 
 * 图片翻转时，计算图片翻转到正常显示需旋转角度  
 */  
public int getRotateAngleForPhoto(String fileName){  
      
    File file = new File(getTotalPath() + fileName);  
      
    int angel = 0;  
    Metadata metadata;  
      
    try{  
        metadata = JpegMetadataReader.readMetadata(file);  
        Directory directory = metadata.getDirectory(ExifDirectory.class);  
        if(directory.containsTag(ExifDirectory.TAG_ORIENTATION)){   
            // Exif信息中方向    
            int orientation = directory.getInt(ExifDirectory.TAG_ORIENTATION);   
            // 原图片的方向信息  
            if(6 == orientation ){  
                //6旋转90  
                angel = 90;  
            }else if( 3 == orientation){  
               //3旋转180  
                angel = 180;  
            }else if( 8 == orientation){  
               //8旋转90  
                angel = 270;  
            }  
        }  
    } catch(JpegProcessingException e){  
        e.printStackTrace();  
    } catch(MetadataException e){  
        e.printStackTrace();  
    }  
    logger.info("图片旋转角度：" + angel);  
    return angel;  
}

/** 
* 计算旋转参数 
*/  
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 / 9%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));    
}

收藏0赞0

请登录后评论。没有帐号？注册一个。

admin

官方人员

0回答
0粉丝
0关注