how we can enforce user to crop the image?

[Abhishek01039]

Platforms

Android, iOS

Description

how do we force users to crop the image in the aspectRatios which we have given to them?

cropRotateEditorConfigs: CropRotateEditorConfigs(
              initAspectRatio: dimension == ImageDimension.square ? 1 : 4 / 3,
              canChangeAspectRatio: false,
              aspectRatios: [
                dimension == ImageDimension.square ? squareRatio : postRatio,
              ],
            ),

Why

No response

[Abhishek01039]

hello @hm21
can you please take a look at this?

Thanks!

[hm21]

Do I understand you correctly that you want to open the normal editor with all the subeditors (like paint or filter editor), but you want to initialize the editor with the specific size?

If so, you have now two options:

Option 1 Easy

You open first the crop-rotate-editor as a standalone editor example and after your user crop the size he wants, you open the main-editor with all other editors, like the filter editor.

Option 2 Hard

You can set the transform configs manually when you open the editor. The complicated case here is that you need to calculate your image size, and it's scale factor, to fit it to the screen. Below is a small example.

callbacks: ProImageEditorCallbacks(
  mainEditorCallbacks: MainEditorCallbacks(
    onAfterViewInit: () {
      editorKey.currentState!.stateHistory.first.transformConfigs =
          TransformConfigs(
        /// Set the required scalefactor that it fit to the screen
        scaleUser: 1.2,

        /// Set the aspect ratio
        aspectRatio: 1,

        /// Set your crop size
        cropRect: Rect.fromLTWH(
          0,
          0,

          /// The crop size
          MediaQuery.of(context).size.width,
          MediaQuery.of(context).size.width,
        ),

        /// Ignore stuff below
        angle: 0,
        originalSize: Size.infinite,
        scaleRotation: 1,
        cropEditorScreenRatio: 0,
        flipX: false,
        flipY: false,
        offset: const Offset(0, 0),
      );
    },
  ),
),

Btw, I will move your question to the Discuss tab in the Q&A category because that tab is better for questions.

[hm21]

Okay, but you open only the crop-rotate standalone editor, or you open the main editor with all subeditors?

[Abhishek01039]

I open the main editor with all subeditors but I just want to make the crop functionality mandatory to all users

[Abhishek01039]

also, how can I open the crop-rotate standalone editor? @hm21

[hm21]

If you just want to make sure the user cropped the image, I recommend you first create your custom appbar like in the example here. In this logic, you edit the “Done” button that if the user didn't crop the image, you display as example a popup which say he must crop the image. To check if the user cropped the image, you can check it like below.

if (editorKey.currentState!.stateManager.transformConfigs.isEmpty) {
  /// show your warning
  /// 
  /// You can also check if the aspect ratio is set like that
  /// editorKey.currentState!.stateManager.transformConfigs.aspectRatio!=-1
  return;
}

To open an editor as a standalone editor, you can follow the example here.