STS3 쇼핑몰 프로젝트[24] 상품 이미지 업로드(썸네일 생성 및 저장) - 5

썸네일 이미지 생성 및 저장

이미지가 여러 개인 경우, 특히 저장된 이미지가 용량이 큰 경우엔 홈페이지를 운영하는 사람과 홈페이지를 사용하는 사람 모두에게 부담이 됩니다.

 

이미지를 많이 호출하게 되면 트래픽량을 많이 소모하는 원인이 됩니다.

서버를 대여해서 해당 홈페이지를 운영하는 입장에선 트래픽량에 따라 지불해야 되는 비용이 달라지기 때문에 민감한 사항입니다.

 

해당 홈페이지를 사용하는 이용자 입장에선 데스크톱, 노트북으로 이용하는 경우엔 부담이 덜하지만, 휴대폰을 통해 특히 와이파이를 사용하지 않고 이미지를 많이 호출하는 페이지로 이동할 경우 로딩 시간과 데이터 소모량이 많게 됩니다.

 

따라서 원본 이미지를 보여주는 것이 아닌 원본보다 크기를 줄인 이미지 즉 썸네일을 보여준다면, 위의 문제점을 다소 보완할 수 있습니다.

순서

1. 썸네일 생성 및 저장(ImageIO)

2. 테스트

1. 썸네일 생성 및 저장(ImageIO)

썸네일 이미지 저장을 실행하는 코드는 앞선 포스팅에서 작성한 이미지 파일을 저장하는 코드에 이어서 작성합니다.

 

저장될 썸네일 이미지의 경우 기존 원본 파일 이름의 앞에 "s_"를 붙여줬습니다. 즉 썸네일 이미지는 아래와 같은 형태의 구성을 가집니다.

"s_" + "uuid_" + "원본 파일 이름. 이미지 타입"

ImageIO를 통해 썸네일을 만들기 위해 ImageIO, BufferedImage, Graphics2D 클래스를 사용했습니다.

ImageIO 클래스

이미지를 읽어오거나 생성할 수 있도록 도와주는 메서드를 제공합니다.

BufferedImage 클래스

이미지 데이터를 처리하거나 조작에 필요한 값과 메서드를 제공합니다.

Graphics2D 클래스

그림을 그리는데 필요한 설정 값과 메서드를 제공합니다.

 

ImageIO도 입출력에 관한 클래스이기 때문에 IllegalArgumentException, IOException을 발생시킬 가능성이 있습니다. 따라서 파일 저장을 위해 작성한 코드를 감싸고 있는 try-catch문 구현부에 이어서 작성했습니다.

 

ImageIO를 통해 썸네일을 만들기 위해선 먼저 원본 파일의 File 객체와 썸네일 이미지 파일의 File 객체가 필요합니다. 원본 이미지의 File 객체는 앞서 작성했기 때문에 썸네일 이미지 파일 객체를 바로 만들어줬습니다.

 

File 타입의 참조 변수를 선언하여 썸네일 이미지 File 객체로 초기화합니다.

File thumbnailFile = new File(uploadPath, "s_" + uploadFileName);

원본 이미지 파일을 ImageIO의 read() 메서드를 호출하여 BufferedImage 타입으로 변경한 후 BufferedImage 타입의 참조 변수를 선언하여 해당 변수에 대입합니다.

File thumbnailFile = new File(uploadPath, "s_" + uploadFileName);

// 변수명은 자신이 원하는대로 설정해도 무방함.
BufferedImage bo_image = ImageIO.read(saveFile);

BufferedImage 생성자를 사용하여 썸네일 이미지인 BufferedImage 객체를 생성하고 참조 변수에 대입합니다.

File thumbnailFile = new File(uploadPath, "s_" + uploadFileName);
				
BufferedImage bo_image = ImageIO.read(saveFile);
BufferedImage bt_image = new BufferedImage(300, 500, BufferedImage.TYPE_3BYTE_BGR);

사용한 BufferedImage 생성자의 매개 변수로 (차례대로) '너비', '높이', '생성될 이미지 타입'을 작성합니다.

썸네일 BufferedImage 객체(bt_image)에서 createGraphics() 메서드 호출을 통해 Graphic2D 객체를 생성한 후 Graphic2D 타입의 참조 변수에 대입합니다.

File thumbnailFile = new File(uploadPath, "s_" + uploadFileName);
			
BufferedImage bo_image = ImageIO.read(saveFile);
BufferedImage bt_image = new BufferedImage(300, 500, BufferedImage.TYPE_3BYTE_BGR);
							
Graphics2D graphic = bt_image.createGraphics();

drawImage() 메서드를 호출하여 원본 이미지를 썸네일 BufferedImage에 지정한 크기로 변경 후 왼쪽 상단 "0, 0" 좌표부터 그려줍니다.

File thumbnailFile = new File(uploadPath, "s_" + uploadFileName);
			
BufferedImage bo_image = ImageIO.read(saveFile);
BufferedImage bt_image = new BufferedImage(300, 500, BufferedImage.TYPE_3BYTE_BGR);
							
Graphics2D graphic = bt_image.createGraphics();
			
graphic.drawImage(bo_image, 0, 0,300,500, null);

drawImage() 메서드

첫 번째 인자: 그리고자 하는 이미지

두 번째, 세 번째 인자: 어느 좌표부터 그림을 그릴 것인지에 대한 'x'값과 'y'값 (좌측 상단 맨 끝점이 "0,0"입니다.)

네 번째, 다섯 번째 인자: 첫 번째 인자 값으로 선택한 이미지의 너비와 높이

여섯 번째 인자: ImageObserver 객체이며, 이미지의 정보를 전달받아서 이미지를 업데이트시키는 역할. 일반적으로 null

 

이후 ImageIO의 write() 메서드를 호출하여 파일로 저장합니다.

File thumbnailFile = new File(uploadPath, "s_" + uploadFileName);
			
BufferedImage bo_image = ImageIO.read(saveFile);
BufferedImage bt_image = new BufferedImage(300, 500, BufferedImage.TYPE_3BYTE_BGR);
							
Graphics2D graphic = bt_image.createGraphics();
			
graphic.drawImage(bo_image, 0, 0,300,500, null);
				
ImageIO.write(bt_image, "jpg", thumbnailFile);

write() 메서드

첫 번째 인자: 파일로 저장할 이미지

두 번째 인자: 어떤 이미지 형식으로 저장할 것인지 String 타입으로 작성('jpg', 'png' 등 자신이 원하는 형식으로 지정)

세 번째 인자: 썸네일 이미지가 저장될 경로와 이름으로 생성한 File 객체 부여

 

전체적인 과정을 요약하면, Java 내에서 크기를 지정한 이미지를 만들고, 해당 이미지에 맞게 원본 이미지를 그려서 넣은 다음 해당 이미지를 파일로 저장한 것입니다.

2. 테스트