🖼️ GIF 이미지 추출하기

이번 글에서는 GIF의 이미지를 추출하는 방법에 대해서 살펴보도록 하겠다.

GIF는 여러장의 이미지를 하나의 이미지로 전환하면서 노출되는 이미지를 의미하는데, 제한된 이미지 공간에 더 많은 컨텐츠를 보여주고자 하는 경우에 많이 사용하게 된다.

Flutter에서는 GIF이미지도 일반 .jpg, .png 이미지와 동일하게 Image 위젯을 사용해서 노출 시킬 수 있다.

GIF를 노출시키는 방법은 별도로 처리해 줄 것이 없어 단순하게 작업이 가능한데, 만일 GIF 이미지 중 특정 이미지만을 노출 하거나 제거 하기 위해서는 코드가 복잡해 지기 시작한다.

물론 여러 패키지들이 있지만, 패키지 지원이 원활한 수준은 아니여서 결국 직접 제어해서 사용하는 편이 유지 보수 및 관리하기 수월하다고 생각한다.

Show GIF

먼저 GIF를 간단하게 보여주도록 하자.

6개의 이미지의 GIF를 준비해서 Flutter에서 노출시켜 보도록 하겠다.

GIF 이미지를 노출시키는 방법은 간단하게 일반 이미지와 동일하게 사용하면 된다.

Image.network(
	"https://velog.velcdn.com/images/tygerhwang/post/b3952b7b-a9e8-4c61-b692-76c96c3d4d9f/image.gif",
          ),

GIF Image	Flutter

GIF to Images

예제로 사용한 GIF 이미지는 총 6장의 이미지로 만들어 졌다.

이번엔 Flutter에서 하나의 GIF 이미지에 있는 여러 이미지들을 개별적으로 추출하는 방법에 대해서 알아보도록 하겠다.

GIF 이미지를 추출하는 패키지는 많지만 여기서는 패키지를 사용하지 않고 추출하는 방법을 사용할 예정이다.

우선 GIF 이미지는 네트워크 상에 저장된 이미지이기 때문에, GIF이미지를 다운받기 위한 http 패키지가 필요하고, 다운 받은 이미지를 로컬 데이터로 저장하기 위한 저장소 경로를 가져오는 path_provider 패키지도 필요하다.

add dependencies

dependencies:
  http: ^1.2.0
  path_provider: ^2.1.3

이제 GIF 이미지를 다운받아 바이트 배열을 디코딩하고, Codec 객체를 사용해 각 프레임 별로 PNG 파일로 전화하여 사용하면 된다.

먼저 GIF 이미지를 다운받아 바이트 배열로 가져오도록 하자.

import 'package:http/http.dart' as http;

Future<void> _extractFrameAsPng() async {
	final http.Response response = await http.get(Uri.parse(url));
    final Uint8List gifBytes = response.bodyBytes;
}

바이트 배열을 dart:ui 패키지를 사용해 Codec 객체를 생성해 주도록 하자.

Codec 객체는 애니메이션 이미지를 디코딩하고 프레임별로 처리해 줄 수 있는 객체이다.

import 'dart:ui' as ui;

Future<void> _extractFrameAsPng() async {
	final ui.Codec codec = await ui.instantiateImageCodec(gifBytes);
    final int frameCount = codec.frameCount;	
}

Codec 객체의 프레임 갯수를 가져올 수 있기 때문에, 개수만큼 프레임을 순차적으로 PNG 파일로 변환해주면 된다.

저장을 하기 위해서는 저장 경로를 알아야 하기 때문에 디렉토리를 가져와 File 데이터로 저장을 해주면 된다.

Future<void> _extractFrameAsPng() async {
    final directory = await getApplicationDocumentsDirectory();

	for (int i = 0; i < frameCount; i++) {
      	final ui.FrameInfo frameInfo = await codec.getNextFrame();
      	final ui.Image frame = frameInfo.image;
      	final ByteData? byteData =
          await frame.toByteData(format: ui.ImageByteFormat.png);
      	if (byteData != null) {
        	final Uint8List pngBytes = byteData.buffer.asUint8List();
        	final File file = File("${directory.path}/frame_$i.png");
        	await file.writeAsBytes(pngBytes);
      }
    }
}

이제 결과를 살펴보자. 정상적으로 GIF 이미지 요소들을 추출하였다.

Code

전체 코드이다.

  Future<void> _extractFrameAsPng() async {
    final http.Response response = await http.get(Uri.parse(url));
    final Uint8List gifBytes = response.bodyBytes;
    final ui.Codec codec = await ui.instantiateImageCodec(gifBytes);
    final int frameCount = codec.frameCount;
    final directory = await getApplicationDocumentsDirectory();

    for (int i = 0; i < frameCount; i++) {
      final ui.FrameInfo frameInfo = await codec.getNextFrame();
      final ui.Image frame = frameInfo.image;
      final ByteData? byteData =
          await frame.toByteData(format: ui.ImageByteFormat.png);
      if (byteData != null) {
        final Uint8List pngBytes = byteData.buffer.asUint8List();
        final File file = File("${directory.path}/frame_$i.png");
        await file.writeAsBytes(pngBytes);
        images.add(file);
      }
    }
  }

마무리

가볍게 GIF의 이미지를 추출하는 방법에 대해서 살펴 보았다.

Flutter에서 GIF를 생성하고 제어하는 패키지는 자주 사용되고 있어서 별도로 다루지는 않고, 추출하는 방법만 다뤄보았다.

추출하는 방법은 사실 엄청 다양한 방법들이 존재하기 때문에, 편한 방법을 사용하면 될 것 같다.