Pre defined size and ratio

[sebastianspross]

Hey,

Thanks for this amazing pub :)

I have a new use case where a user uploads images to my app and I want the user to crop the image to 512x512 with face in the center. How can I fix pixel and ratio so that the user only needs to position their image via zoom and dragging? Is there the chance to position the initial position of the 512x512 window?

Best
Sebastian

[hm21]

Hey Sebastian,

If you want to allow users to zoom and drag with a fixed output size, you can configure this within the imageGenerationConfigs, as shown in the example below. In this example, I’ve also set the initial aspect ratio to 1:1 and restricted the user from modifying it.

Please note that if the original image has a smaller size or if the user zooms in too much, the output size may be reduced due to insufficient pixels. As an example, an image with dimensions of 312x312 pixels will also have an output size of 312x312 pixels.

Important: Update to version 5.1.4 cuz as i wrote this example code, I noticed a minor issue that can result in incorrect output sizes.

By the way, you might also find this example interesting, which demonstrates how to crop round profile pictures.

CropRotateEditor.network(
  'https://picsum.photos/id/230/2000',
  key: _cropRotateEditorKey,
  initConfigs: CropRotateEditorInitConfigs(
    theme: ThemeData.dark(),
    convertToUint8List: true,
    configs: ProImageEditorConfigs(
      designMode: platformDesignMode,
      cropRotateEditorConfigs: const CropRotateEditorConfigs(
        initAspectRatio: 1,
        canChangeAspectRatio: false,
      ),
      imageGenerationConfigs: const ImageGenerationConfigs(
        maxOutputSize: Size(512, 512),

        /// The default output format is `jpg` but you can change it like
        /// below if you prefer as example `png`
        /// outputFormat: OutputFormat.png,

        /// If you wish to enforce a custom pixel ratio, you can
        /// configure it below.
        /// customPixelRatio: ,
      ),
    ),
    onImageEditingComplete: (bytes) async {
      /// TODO: Handle image bytes
      print(bytes.length);
    },
  ),
);

[sebastianspross]

after CropRotateEditor finishes a picture of 1200x1599 is downsized to 385x384. Any suggestions what am I doing wrong?

[hm21]

It seems that the issue arises from setting the maximum output size in both editors, which causes a problem. I've just released version 5.2.0, which includes the copyWith method. If you prefer to use the way which you post above, I recommend removing the maxOutputSize from the global generationConfigs and setting it only in the main editor.

 configs: proImageEditorConfigs.copyWith(
  imageGenerationConfigs:
      proImageEditorConfigs.imageGenerationConfigs.copyWith(
    maxOutputSize: const Size(512, 512),
  ),
),

Btw, in this latest update, I’ve provided an example that demonstrates the optimal approach for opening first the crop-rotate-editor and move than to the main-editor. In this example, you share only the transformations between the editors and convert the image to Uint8List only in the main editor. This method is faster and reduces delays between the editors.

[sebastianspross]

thanks for the amazing fast help! much appreciated.

When I am just using the copyWith and don't zoom, rotate or anything I get 512x513.

When I am using your example you linked I end up with 384x384 each time.

[hm21]

You're correct. After testing, I realized that when the image fits the screen width, I also get 384x384, but when it fits the screen height, I get 512x512. I'll open a new issue and attempt to fix it when I have time.

Meanwhile, I recommend removing the maximum output size from the ImageGenerationConfigs and cropping the image manually. This task is straightforward and requires only a few lines of code. You can use the image package, which is already included in your app, since the image editor depends on it. Below is an example code snippet demonstrating how to crop the image. Optionally, you can also use isolates or web workers combined with a Completer to prevent your UI from freezing.

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

/// Update the callback
callbacks: ProImageEditorCallbacks(
    onImageEditingComplete: (bytes) async {
      final image = img.decodeImage(bytes);

      final resizedImage = img.copyResize(
        image!,
        width: 512,
        height: 512,
      );

      return onImageEditingComplete(img.encodePng(resizedImage));
    },
  ),

I get 512x513.

The reason you're not getting exactly 512x512 is due to the way the image editor currently captures the image.
Simple explained, the image editor doesn't handle resizing. Instead, the editor reads the drawn pixels and multiplies them by the pixel ratio to maintain image quality without scaling down. The issue arises because pixels are represented as int, while the pixel ratio and drawn size are represented as double values. This discrepancy can lead to rounding issues when the values are multiplied, causing the final dimensions to be slightly off. Ideally, the values should always be rounded down, but I think that Flutter uses the default rounding method.

Currently, it's not possible to configure this. We can only set pixel-ratio, the rest is handled by native code from Flutter. However, in a future update, I plan to add an option that will enforce image resizing.

[sebastianspross]

Okay. understood. I'll take the workaround with the image pub. It is anyways not too bad.