반응형


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="이미지_파일의_경로">

<%

}

%>




반응형
블로그 이미지

Bryan_

,
반응형
일반적으로 JSP파일에서 한글을 직접 입력하고 싶을 때, 파일의 맨 위에
<%@ page contentType="text/html; charset=euc-kr" %> 이렇게만 써주면 한글이 문제없이 보이지만, Java에서 넘어오는 문자열이나 웹 주소를 통해 받는 파라미터는 모두 유니코드(UTF-8)이기 때문에 되도록이면 UTF-8로 통일해서 쓰는 것이 여러 모로 변환의 귀찮음도 줄일 겸 좋을 것 같다.


(1) 아파치 톰캣에서 설정할 부분:
<Connector port="8080" .../> 태그의 뒷부분에
useBodyEncodingForURI="true" URIEncoding="UTF-8"를 추가한다.
(예) <Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" useBodyEncodingForURI="true" URIEncoding="UTF-8" />

<Connector port="8009" ... /> 태그의 뒷부분에도 똑같이 추가해 준다.
(예) <Connector port="8009" protocol="AJP/1.3" redirectPort="8443" useBodyEncodingForURI="true" URIEncoding="UTF-8"/>


(2) JSP 파일에서 설정할 부분:
JSP파일의 시작 부분에 다음 줄을 추가한다. 또는 charset이 euc-kr로 되어 있을 경우 바꿔 준다.
<%@ page contentType="text/html; charset=UTF-8" %>


HTML 코드가 시작될 만한 곳 어딘가에 (위치가 큰 상관은 없어 보임) 아래 메타태그를 추가해 준다.
<META http-equiv="Content-Type" content="text/html; charset=UTF-8"/>


(3) JSP 파일 자체의 포맷 확인:
사용하는 에디터에 따라서 텍스트파일의 저장방식이 다를 수 있다.
현재 버전(0.9)의 AcroEdit의 경우 사용자가 직접 유니코드로 변환 명령을 주지 않으면 유니코드로 저장하지 않는다.
파일을 저장할 때 반드시 유니코드(UTF-8)로 저장할 것.
반응형
블로그 이미지

Bryan_

,