手機上傳豎拍圖片至服務器，會逆時針旋轉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));
}