[Flutter] image 파일의 image 사이즈 조절하기

사이드 프로젝트를 진행하다가 image 파일의 image 사이즈를 조절하는 기능을 추가할 일이 생겨서 방법을 찾아보다가 image라는 라이브러리를 사용하여 이미지 파일의 image 사이즈 조절하는 방법을 알게 되어 정리해보려고 합니다.

목차

1. image 라이브러리

2. image 사이즈 조절하는 코드

 

image 라이브러리

터미널 명령어 실행

flutter pub add image

 

직접 pubspec_yaml에 입력

dependencies:
  image: ^4.1.7

 

 

둘중에  편한 방법으로 라이브러리를 install 해주시면 됩니다.

 

다트 이미지 라이브러리는 다양한 이미지 파일 형식으로 이미지를 로드, 저장 및 조작할 수 있는 기능을 제공합니다.

 

지원되는 이미지 파일 형식은 다음과 같습니다.

 

 

image 사이즈 조절하는 코드

 

import 'package:image/image.dart' as img;

Future<File?> resizeImage(XFile _image) async {
    late final img.Image resizedImage;
    final path = _image.path;
    final bytes = await File(path).readAsBytes();
    final img.Image? image = img.decodeImage(bytes);

    if (image != null) {
      resizedImage =
          img.copyResize(image, width: targetWidth, height: targetHeight);
      String tempPath = (await getTemporaryDirectory()).path;
      final tempFile = File('$tempPath/resized_image.jpg');
      return tempFile.writeAsBytes(img.encodeJPG(resizedImage));
    } else {
      return null;
    }
  }

우선 제가 작성한 함수는 XFile 타입의 객체를 입력받아 Future <File?> 타입의 값을 리턴합니다. image 라이브러리의 copeyResize 함수로 이미지 사이즈를 조절할 수 있습니다. 따라서 XFile을 img.Image 타입으로 변환을 해줘야 합니다.

 

XFile to img.Image

우선 File의 readAsBytes 함수로 File을 bytes로 변환한 후 image 라이브러리의 decodeImage 함수를 통해 bytes를 img.Image 타입으로 변환해 줍니다.

 

copyResize()

첫 번째 매개변수로 img.Image 객체를 넣어주고, 변환할 width와 height를 지정해 줍니다.

 

img.Image to File

path_provider 라이브러리의 getTemporaryDirectory 함수를 사용하여 임시로 사용할 캐시 폴더의 주소를 가져옵니다. 캐쉬 폴더의 주소 뒤에 image 파일의 이름과 확장자를 넣어주어 file의 주소를 만들고 만든 파일 주소로 File 객체를 만듭니다.

 

이후 resize 한 img.Image 객체를 img.encodeJPG 함수로 byte로 변환한 후 File.writeAsBytes 함수를 사용하여 byte를 File로 변환시켜 줍니다.