flutter 이미지 crop 하기

데일리 로그라는 기록을 남기는 부분을 진행해야 했다.

사진을 촬영하고.... 내가 원하는만큼 짤라야해서

구글링을 통해서

extended_image: ^4.0.0

라는 패키지를 찾았다.

해당 패키지를 보니까 다양한 기능을 할 수 있지만 제일 쓰기 편해보이고 추후에 여러가지 기능도 덧 붙일 수 있으니 사용하게 되었다.

 ExtendedImage.net![](https://velog.velcdn.com/images%2Fkindcode%2Fpost%2F205c33d5-0b45-4846-90dc-6a6e408bbd7d%2F%E1%84%83%E1%85%A1%E1%84%8B%E1%85%AE%E1%86%AB%E1%84%85%E1%85%A9%E1%84%83%E1%85%B3%20(2).jpeg)work(
      imageTestUrl,
      fit: BoxFit.contain,
      mode: ExtendedImageMode.editor,
      extendedImageEditorKey: editorKey,
      initEditorConfigHandler: (state) {
        return EditorConfig(
            maxScale: 8.0,
            cropRectPadding: EdgeInsets.all(20.0),
            hitTestSize: 20.0,
            cropAspectRatio: _aspectRatio.aspectRatio);
      },
    );

예시 코드를 보아하니

모드를 변경해주고 key를 사용해주면 사용이 가능해 보였다.

그치만 잘려진 이미지가 어디에 저장되는지는 아무리봐도 잘 모르겠어서...

구글링을 해보았지만 별 소득은 없었다 ㅜㅜ

결국 패키지의 깃허브 홈페이지에 들어가서 예시코드를 보았는데..

와.. 이걸 사용하려니 조금 복잡해 보였다 ㅎㅎ

일단 !

https://github.com/fluttercandies/extended_image/blob/master/example/lib/common/utils/crop_editor_helper.dart

해당 페이지에 접속해서 해당 코드를 내 코드에 붙여넣은뒤..

이미지를 자르는 부분에

Future<void> cropImage() async {
    if (_cropping) {
      return;
    }
    final Uint8List fileData = Uint8List.fromList(kIsWeb
        ? (await cropImageDataWithDartLibrary(state: editorKey.currentState!))!
        : (await cropImageDataWithNativeLibrary(
            state: editorKey.currentState!))!);
    final String? fileFath =
        await ImageSaver.save('extended_image_cropped_image.jpg', fileData);

    showToast('save image : $fileFath');
    _cropping = false;
  }
  

이 코드를 붙여넣었다.

물론 내가 사용할것이니 적당히 커스텀해서 붙여넣었다 ㅎㅎ..

그런데 막상 복붙만 하니까 적당한 빨간줄이 등장해서 원인을 찾아보니

해당 패키지를 사용하려면

https://pub.dev/packages/image_editor

이녀석도 같이 설치를 해주어야 했다..

여하튼

image_editor
extended_image 를 설치해주고

예시에 나온것처럼 코드를 사용해주니까

정상적으로 이미지가 잘려서 내가 원하는 만큼만 쓸 수 있게 되었다.