基于java在服务端解决手机上传竖拍照片旋转90度问题

最新推荐文章于 2024-04-24 22:51:49 发布

sum__mer

最新推荐文章于 2024-04-24 22:51:49 发布

阅读量9.5k

点赞数 3

文章标签：浏览器显示图片翻转手机上传图片 java html5

本文链接：https://blog.csdn.net/sum__mer/article/details/50847584

版权

手机上传竖拍图片至服务器，会逆时针旋转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));  
}

sum__mer

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
基于java在服务端解决手机上传竖拍照片旋转90度问题

手机上传竖拍图片至服务器，会逆时针旋转90度，浏览器读取图片，显示的是旋转后的图片。解决思路：获取照片拍摄的方位角，对非横排的照片进行角度旋转修正。有两种修正方法，1、在服务端修正图片角度，修正后传到浏览器显示。2、在前端修正图片角度，修正后在浏览器显示。可利用exif.js读取图片的拍摄信息后进行修正。在此，选择第一种方式，在服务端对图片进行修正后，在浏览器显示。照片的方向信息在
复制链接

扫一扫