[Flutter] 이미지 파일 용량 줄이기

flutter에서 이미지 용량을 줄이는 기능을 제공하는 라이브러리는 3개 정도 있습니다. 

• image_picker
• flutter_image_compress
• flutter_native_image

오늘은 이 중에서 flutter_image_compress 라이브러리를 통해 이미지 파일 용량을 압축하는 방법을 설명드리겠습니다.

목차

1. image_compress 라이브러리 소개

2. 이미지 용량 압축 코드 설명

 

 

image_compress 라이브러리 소개

flutter에서 image_compress 라이브러리를 사용하기 위해선 우선 pubspec_yaml 파일 dependencies 부분에 라이브러리를 추가해줘야 합니다. 

라이브러리를 추가하는 방법은 2가지가 있습니다.

 

pubspec_yaml 파일에 직접 입력하기

dependencies:
  flutter_image_compress: <latest_version>

위와 같이 dependencies에 라이브러리 명과 버전을 입력하고 

오른쪽 상단에 있는 Pub get을 클릭해주시면 됩니다.

터미널에 명령어 실행

flutter pub add flutter_image_compress

 

저는 편의성 때문에 터미널 명령어를 많이 사용하는데요. 터미널에 위 명령어를 실행시켜 주시면 됩니다. 이 명령어를 실행하면 Pub get까지 같이 실행시켜 주기 때문에 편리합니다.

 

 

파일 압축 함수

image_compress에서 제공해주는 파일 압축 함수는 다음과 같이 4가지가 있습니다.

// 1. compress file and get Uint8List
  Future<Uint8List> testCompressFile(File file) async {
    var result = await FlutterImageCompress.compressWithFile(
      file.absolute.path,
      minWidth: 2300,
      minHeight: 1500,
      quality: 94,
      rotate: 90,
    );
    print(file.lengthSync());
    print(result.length);
    return result;
  }

  // 2. compress file and get file.
  Future<File> testCompressAndGetFile(File file, String targetPath) async {
    var result = await FlutterImageCompress.compressAndGetFile(
        file.absolute.path, targetPath,
        quality: 88,
        rotate: 180,
      );

    print(file.lengthSync());
    print(result.lengthSync());

    return result;
  }

  // 3. compress asset and get Uint8List.
  Future<Uint8List> testCompressAsset(String assetName) async {
    var list = await FlutterImageCompress.compressAssetImage(
      assetName,
      minHeight: 1920,
      minWidth: 1080,
      quality: 96,
      rotate: 180,
    );

    return list;
  }

  // 4. compress Uint8List and get another Uint8List.
  Future<Uint8List> testComporessList(Uint8List list) async {
    var result = await FlutterImageCompress.compressWithList(
      list,
      minHeight: 1920,
      minWidth: 1080,
      quality: 96,
      rotate: 135,
    );
    print(list.length);
    print(result.length);
    return result;
  }

 

제 프로젝트에서는 파일을 입력해주면 용량이 압축된 파일을 리턴 받아야 하기 때문에 2번 함수를 사용하였습니다.

첫 번째 매개변수에는 파일의 주소를 입력해 주고, 

두 번째 매개변수에는 용량 압축 후 반환받을 파일의 주소를 입력해 주면 됩니다. 단, 첫 번째 매개변수의 파일 주소와는 상이해야 합니다.

quality 매개변수는 타깃 이미지의 품질을 %으로 정하는 것으로 이 변수의 크기에 따라 파일 용량이 결정됩니다.

rotate 매개변수는 파일의 회전이 필요한 경우 입력하면 됩니다.

 

 

이미지 용량 압축 코드 설명

 

Future<XFile?> compressFile(XFile file) async {
    var fileFromImage = File(file.path);
    var basename = path.basenameWithoutExtension(fileFromImage.path);
    var pathString = fileFromImage.path.split(path.basename(fileFromImage.path))[0];

    var pathStringWithExtension = "$pathString${basename}_image.jpg";
    var result = await FlutterImageCompress.compressAndGetFile(
      file.path,
      pathStringWithExtension,
      quality: 5,
    );

    //if (result != null) print(await result.length());

    return result;
  }

위 함수는 제 프로젝트에서 사용한 코드입니다. 우선 반환받을 파일의 주소를 만들어줘야 하는데요. 기본 파일의 주소에서 확장자를 제거하고 _image.jpg의 확장자를 추가하여 반환받을 파일의 주소를 만들어 줍니다. 그리고 FlutterImageCompress.compressAndGetFile 함수에 매개변수에 넣어주면 됩니다.