[Java & JavaScript] 모바일 촬영 이미지 익스플로러 회전 현상 수정

모바일에서 촬영한 이미지를 익스플로러에 첨부시 

모바일에서 촬영한 각도만큼 회전해서 보여지게된다

orientation이라는 값을 익스플로러가 처리를 못해서? 인지 

다른 블로그에서 봤는데 기억 잘안남

방법은 해당이미지의 메타데이터를 읽어서 메타데이터의 orientation값을 이용하여

정상적으로 보이도록 회전 시켜주면된다

단 jpg만 가능하다 png, bmp, gif 같은 파일의 orientaion을 가져오진 못했음

Front 

<script type="text/javascript" src="./exif.js"></script>
// 위 자바스크립트 파일이 필요
// 위 자바스크립트 파일 얻는 방법
// npm install exif-js를 해서 생기는 폴더중에 exif.js 파일이 있는데 해당 파일만 가져와서 import 하면된다
function 이미지 읽어서 회전시켜주는 함수(이미지파일) {
	
    var reader = new FileReader();
    
    reader.onload = (function (theFile) {
        return function (e) {
        	        	
        	EXIF.getData( theFile, function(){
        	    var styleTransForm = '';
        	    
            	var agent = navigator.userAgent.toLowerCase();
            	
            	if((navigator.appName == 'Netscape' && navigator.userAgent.search('Trident') != -1) || (agent.indexOf("msie") != -1)){
            		
            		const orientation = EXIF.getTag( theFile, "Orientation" );
            		
            		console.log( orientation );
            		
            		styleTransForm = setCssTransformFromOrientation(orientation);
            	}
// 파일이 그려질 img 태그를 가져와서 위 styleTransForm css 적용해주면 됨 여기서 
        	  
        	});
        };
    })(files);
    reader.readAsDataURL(files);	
}
function orientaion 값에따라 회전 css 리턴(orientation){
	
	switch( orientation ) {
	
		// @details 이미지 회전값이 0인경우 ( 정방향 
		case 1 :
			return "rotate( 0deg )";
			
			// @details 이미지 회전값이 180 기운 경우
		case 3 :
			return "rotate( 180deg )";
			
			// @details 이미지 회전값이 270 기운 경우 ( 왼쪽으로 90 기운 경우 )
		case 6 :
			return "rotate( 90deg )";
			
			// @details 이미지 회전값이 90 기운 경우
		case 8 :
			return "rotate( 270deg )";
			
		default:
			return '';

	}
}

Back

아래의 코드를 사용하기 위해서는 아래의 라이브러리가 필요

<dependency>

    <groupId>com.drewnoakes</groupId>

    <artifactId>metadata-extractor</artifactId>

    <version>2.12.0</version>

</dependency>

<dependency>

    <groupId>com.adobe.xmp</groupId>

    <artifactId>xmpcore</artifactId>

    <version>6.1.10</version>

</dependency>

public Map<String, Object> 이미지 파일의 orientaion 값을 구함(이미지 파일) {
        
        int orientation = 1; // 회전정보, 1. 0도, 3. 180도, 6. 270도, 8. 90도 회전한 정보 
        int width = 0; // 이미지의 가로폭
        int height = 0; // 이미지의 세로높이 
        int tempWidth = 0; // 이미지 가로, 세로 교차를 위한 임의 변수 
        Metadata metadata; // 이미지 메타 데이터 객체 
        Directory directory; // 이미지의 Exif 데이터를 읽기 위한 객체 
        JpegDirectory jpegDirectory; // JPG 이미지 정보를 읽기 위한 객체
        
        Map<String, Object> resultMap = new HashMap<>();
        
        try {
            metadata = ImageMetadataReader.readMetadata(imageFile);
            directory = metadata.getFirstDirectoryOfType(ExifIFD0Directory.class);
            jpegDirectory = metadata.getFirstDirectoryOfType(JpegDirectory.class);
 
            if(directory != null){
                orientation = directory.getInt(ExifIFD0Directory.TAG_ORIENTATION); // 회전정보
                width = jpegDirectory.getImageWidth(); // 가로
                height = jpegDirectory.getImageHeight(); // 세로
            }
            
            // 3. 변경할 값들을 설정한다.
            AffineTransform atf = new AffineTransform();
            System.out.println("orientation: " + orientation);
            switch (orientation) {
            case 1:
                break;
            case 2: // Flip X
                atf.scale(-1.0, 1.0);
                atf.translate(-width, 0);
                break;
            case 3: // PI rotation 
                atf.translate(width, height);
                atf.rotate(Math.PI);
                break;
            case 4: // Flip Y
                atf.scale(1.0, -1.0);
                atf.translate(0, -height);
                break;
            case 5: // - PI/2 and Flip X
                atf.rotate(-Math.PI / 2);
                atf.scale(-1.0, 1.0);
                break;
            case 6: // -PI/2 and -width
                atf.translate(height, 0);
                atf.rotate(Math.PI / 2);
                break;
            case 7: // PI/2 and Flip
                atf.scale(-1.0, 1.0);
                atf.translate(-height, 0);
                atf.translate(0, width);
                atf.rotate(  3 * Math.PI / 2);
                break;
            case 8: // PI / 2
                atf.translate(0, width);
                atf.rotate(  3 * Math.PI / 2);
                break;
            }
            
            switch (orientation) {
            case 5:
            case 6:
            case 7:
            case 8:
                tempWidth = width;
                width = height;
                height = tempWidth;
                break;
            }
            
            resultMap.put("atf", atf);
            resultMap.put("width", width);
            resultMap.put("height", height);
            resultMap.put("orientation", orientation);
            
            return resultMap;
            
        } catch (ImageProcessingException e) {
            e.printStackTrace();
        } catch (MetadataException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        
        return null;
 
    }
 
 
public void 이미지파일을 회전하여 저장(File imgFile, String saveFilePath) {
        
        try {
            // 위함에서 회전시킨 atf 값을 이용하여 실제로 이미지를 회전시켜서 ㅓ장
 
            AffineTransform atf = (AffineTransform) rotateImgInfoMap.get("atf");
            int width = (int) rotateImgInfoMap.get("width");
            int height = (int) rotateImgInfoMap.get("height");
            
            BufferedImage image = ImageIO.read(imgFile);
            final BufferedImage afterImage = new BufferedImage(width, height, image.getType());
            final AffineTransformOp rotateOp = new AffineTransformOp(atf, AffineTransformOp.TYPE_BILINEAR);
            final BufferedImage rotatedImage = rotateOp.filter(image, afterImage);
            Iterator<ImageWriter> iter = ImageIO.getImageWritersByFormatName(fileExtsn);
            ImageWriter writer = iter.next();
            ImageWriteParam iwp = writer.getDefaultWriteParam();
            iwp.setCompressionMode(ImageWriteParam.MODE_EXPLICIT);
            iwp.setCompressionQuality(1.0f);
 
            // 4. 회전하여 생성할 파일을 만든다.
            File outFile = new File(saveFilePath);
            
            if (!outFile.getParentFile().exists()) {
                outFile.getParentFile().mkdirs();
            }
            FileImageOutputStream fios = new FileImageOutputStream(outFile);
 
 
            // 5. 원본파일을 회전하여 파일을 저장한다.
            writer.setOutput(fios);
            writer.write(null, new IIOImage(rotatedImage ,null,null),iwp);
            fios.close();
            writer.dispose();
 
        
        } catch (IOException e) {
            e.printStackTrace();
        }
        
    }