JSP에서 자바 코드를 써서 image orientation을 먼저 알아내고,
orientation 숫자를 기준으로 회전해야 할 각도를 구해서 CSS가 회전을 수행하는 방식이다.
1. 필요한 라이브러리 다운로드 및 적용
이미지의 EXIF 정보에서 orientation을 알아내야 하기 때문에 Metadata-extractor를 쓴다.
[직접 다운로드 또는 사용법 설명]
https://github.com/drewnoakes/metadata-extractor
[Maven]
<dependency>
<groupId>com.drewnoakes</groupId>
<artifactId>metadata-extractor</artifactId>
<version>2.9.1</version>
</dependency>
[Gradle]
- dependencies에 추가
compile group: 'com.drewnoakes', name: 'metadata-extractor', version: '2.9.1'
2. 소스코드 작성
2-1. Metadata-extractor 기반의 자바 코드:
Java의 File 오브젝트를 사용해서 이미지 파일의 메타데이터 알아내는 Java 클래스를 정의한다.
import java.io.File;
import java.io.IOException;
import com.drew.imaging.ImageMetadataReader;
import com.drew.imaging.ImageProcessingException;
import com.drew.metadata.Directory;
import com.drew.metadata.Metadata;
import com.drew.metadata.MetadataException;
import com.drew.metadata.exif.ExifIFD0Directory;
public class ImageUtil {
/**
* Gets the orientation of an image (usually photo).
* Outputs:
* 6: rotate 90,
* 1: original (no change)
* 3: rotate 180,
* 8: rotate 270,
* others: original (no change)
*
* @param in a File object to check
* @return orientation value
* @throws IOException
*/
public static int getOrientation(File in) throws IOException {
int orientation = 1;
Metadata metadata;
Directory directory;
try {
metadata = ImageMetadataReader.readMetadata(in);
directory = metadata.getFirstDirectoryOfType(ExifIFD0Directory.class);
if(directory != null){
orientation = directory.getInt(ExifIFD0Directory.TAG_ORIENTATION);
}
} catch (ImageProcessingException e) {
System.err.println("[ImgUtil] could not process image");
e.printStackTrace();
} catch (MetadataException e) {
System.err.println("[ImgUtil] could not get orientation from image");
e.printStackTrace();
}
return orientation;
}
public static int getDegreeForOrientation(int orientation){
int degree = 0;
switch(orientation){
case 6:
degree = 90; break;
case 1:
degree = 0; break;
case 3:
degree = 180; break;
case 8:
degree = 270; break;
default:
degree = 0; break;
}
return degree;
}
}
2-2. CSS 정의
실제로 이미지 회전을 수행하는 CSS 코드를 작성한다.
html 파일에서 <head> 태그 안에 넣거나, 별도로 쓰는 css파일에 추가한다.
<style type="text/css">
.rotate90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate180 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate270 {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
</style>
2-3. JSP 소스코드
먼저 2-1에서 만든 자바 클래스를 JSP에 import한다.
<%@ page import="ImageUtil이_포함된_패키지_이름.*" %>
<%
String filePath = "이미지_파일의_경로";
File f = new File(filePath);
int orientation = ImageUtil.getOrientation(f);
int degree = ImageUtil.getDegreeForOrientation(orientation);
if(degree != 0){
%>
<img src="이미지_파일의_경로" class="rotate<%=degree%>">
<%
} else {
%>
<img src="이미지_파일의_경로">
<%
}
%>
