[Bug]: cropToImageBounds no longer works

[JCKodel]

Package Version

11.11.0

Flutter Version

Flutter 3.35.6 • channel stable

Platforms

iOS, Android

How to reproduce?

In version 11.10.1, when adding:

ProImageEditorConfigs(
  imageGeneration: const ImageGenerationConfigs(cropToImageBounds: false)
)

, images were cropped without filling the cropped area with white (considering I'm using CropRotateEditorConfigs(initialCropMode: CropMode.oval)).

In version 11.11.0, the image is being cropped with those white borders, regardless the cropToImageBounds: false:

Logs (optional)

Example code (optional)

Device Model (optional)

No response

[hm21]

Thanks for reporting the issue.

The white background appears when the outputFormat is set to JPEG, since JPEG doesn’t support transparency. The behavior of cropToImageBounds means that if you have a large transparent image with a single sticker somewhere, the editor will crop the image to the bounding box of that visible content (left, top, right, bottom).

Also, the difference between version 11.10.1 and 11.11.0 is just the addition of a new paint mode, which only affects the paint editor and doesn’t change how image generation works.

So, did you maybe change the outputFormat from png to jpeg (which is the default)? If not, could you share a minimal example to reproduce the issue?

FYI: The web demo always uses the latest version, and I saw the Round-Cropper example works fine there.

[JCKodel]

It's not about tranparency, it's about cropping a rectangular image from an oval UI.

In other words, I want the user to use the oval cropper but the cropped image should be square. That would allow future changes in avatar's shape, for instance.

Is this even possible?

[hm21]

Got it! I thought you had an issue cuz of the title "[Bug]: cropToImageBounds no longer works". However, since it's actually a question, I'll go ahead and transfer it to the Discuss Q&A section, as that's a better place for it. We can continue the discussion there if my answer below isn't clear enough for you.

If you want to display the oval crop mode until the user presses "done" and then switch directly to the rectangular crop mode, you can simply update the editor as shown below. Keep in mind that this will slow down generation time, as the editor can no longer preprocess the image in the background.

final _editorKey = GlobalKey<ProImageEditorState>();

@override
Widget build(BuildContext context) {
  return ProImageEditor.asset(
    kImageEditorExampleAssetPath,
    key: _editorKey,
    callbacks: ProImageEditorCallbacks(
      onImageEditingComplete: (result) async {
        // TODO: Handle result
        print(result.length);
      },
      mainEditorCallbacks: MainEditorCallbacks(
        onDone: () {
          final editor = _editorKey.currentState!;
          final transformations = editor.stateManager.transformConfigs;
          editor.addHistory(
            transformConfigs:
                transformations.copyWith(cropMode: CropMode.rectangular),
          );
        },
      ),
    ),
    configs: ProImageEditorConfigs(
      designMode: platformDesignMode,
      cropRotateEditor: const CropRotateEditorConfigs(
        initialCropMode: CropMode.oval,

        /// Optional
        initAspectRatio: 1, // 16/9
        // aspectRatios: [
        //   AspectRatioItem(text: 'Free', value: -1),
        //   AspectRatioItem(text: 'Original', value: 0.0),
        //   AspectRatioItem(text: '1*1', value: 1.0 / 1.0),
        //   AspectRatioItem(text: '4*3', value: 4.0 / 3.0),
        //   AspectRatioItem(text: '3*4', value: 3.0 / 4.0),
        //   AspectRatioItem(text: '16*9', value: 16.0 / 9.0),
        //   AspectRatioItem(text: '9*16', value: 9.0 / 16.0)
        // ],
      ),
      imageGeneration: const ImageGenerationConfigs(
        enableBackgroundGeneration: false,
        enableUseOriginalBytes: false,
        processorConfigs: ProcessorConfigs(
          processorMode: ProcessorMode.minimum,
        ),
      ),
    ),
  );
}