[flutter] 플러터에서의 이미지 처리 및 필터링 방법

15 Dec 2023

flutter

플러터는 강력한 이미지 처리 및 필터링 기능을 제공하여 앱에서 다양한 그래픽 효과를 쉽게 구현할 수 있습니다. 이미지를 불러오고 다양한 필터를 적용하는 방법에 대해 알아봅시다.

이미지 불러오기

플러터 앱에서 이미지를 불러오기 위해 Image 위젯을 사용합니다. 다음은 로컬 파일로부터 이미지를 불러오는 예제 코드입니다.

Image image = Image.asset('assets/images/sample.jpg');

네트워크 또는 인터넷에서 이미지를 가져오려면 NetworkImage 위젯을 사용할 수 있습니다.

Image image = Image.network('https://example.com/image.jpg');

이미지 필터링

그레이스케일 필터링

이미지에 그레이스케일 필터를 적용하여 흑백 이미지로 변환할 수 있습니다. 이를 위해 ColorFiltered 위젯과 ColorFilter.mode를 사용합니다.

ColorFiltered grayscaleImage = ColorFiltered(
  colorFilter: ColorFilter.mode(Colors.grey, BlendMode.saturation),
  child: image,
);

모자이크 필터링

이미지에 모자이크 효과를 주려면 이미지를 일정 영역으로 잘라 크기를 변경한 후 다시 확대하는 방식으로 구현할 수 있습니다. 주로 pixel 처리를 사용하여 모자이크 효과를 적용합니다.

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

Uint8List applyMosaicFilter(Uint8List imageData) {
  img.Image image = img.decodeImage(imageData);
  img.Image mosaicImage = img.copyResize(image, width: 20, height: 20);
  mosaicImage = img.copyResize(mosaicImage, width: image.width, height: image.height);
  return Uint8List.fromList(img.encodePng(mosaicImage));
}

다른 필터링 효과

흐림 효과, 색상 반전, 색조 조절 등 다양한 필터링 효과를 적용할 수 있습니다. dart:ui 패키지의 ImageFilter 클래스를 사용하여 이미지에 다양한 필터를 적용할 수 있습니다.

import 'dart:ui' as ui;

ui.Image applyBlurFilter(ui.Image image) {
  final recorder = ui.PictureRecorder();
  final canvas = ui.Canvas(recorder);

  final paint = ui.Paint()..colorFilter = ui.ColorFilter.mode(Colors.grey, ui.BlendMode.saturation);
  canvas.drawImage(image, const ui.Offset(0.0, 0.0), paint);

  final blurredImage = recorder.endRecording().toImage(image.width, image.height);
  return blurredImage;
}

플러터를 사용하여 이미지를 다루고 필터링하는 방법에 대해 간략하게 살펴보았습니다. 이미지 처리를 통해 앱에 다채로운 시각적 효과를 더할 수 있습니다.

참고 문헌

Flutter 공식 문서