[Feature request] Specifying max width and height when cropping

[diegotori]

Platforms

Web, Windows, macOS, Linux, iOS, Android

Description

We're trying to prevent the user from re-sizing/cropping images beyond a width and height. This should work as either an exact size requirement, or as a maximum width and height requirement.

Why

Right now, there's no visual way to indicate that the user's cropping or editing exceeds a bounded size, especially if we intend to upload images that require exact dimensions. Also, the cropping dimensions are represented in aspect ratios, thus they are not bound by physical size. As a result, we have to validate after the user finishes their edit, validate and display the results in a dialog if it fails validation.

Also, if a feature such as this one isn't planned, what's the best way to get the final image that the user selects in order to validate it before uploading it? In other words, when the user makes a change to the image, where can we latch onto in order to display UI that can guide the user to resizing it to either an exact size or a maximum one? Right now, I'm not sure if there's something that this library exposes that we can use to visually indicate to the user that their selection does not match an exact width and height, or exceeds it.

[hm21]

Just to make sure I understand you correctly, for example, if a user has an image with dimensions of 2000x2000, and you want to store it in the backend as 256x256 without handling the resizing there, do you mean you want to force the user to select a small area of the image themselves? Or should the image be automatically up- or downscaled to the correct dimensions?

Anyway, the editor already supports setting the maxOutputSize. You can define the desired output size in the configuration. Just keep in mind that the aspect ratio of the crop selection should match the maxOutputSize.

configs: ProImageEditorConfigs(
  designMode: platformDesignMode,
  cropRotateEditor: const CropRotateEditorConfigs(
    initAspectRatio: 1,
    showAspectRatioButton: false,
  ),
  imageGeneration: const ImageGenerationConfigs(
    maxOutputSize: Size(256, 256),
  ),
),

Alternatively, you can directly convert the output to the desired format. This might slow down the generation slightly, but you'll get the exact dimensions you want.

 configs: const ProImageEditorConfigs(
  imageGeneration: ImageGenerationConfigs(
    enableBackgroundGeneration: false,
    enableIsolateGeneration: false,
  ),
),
callbacks: ProImageEditorCallbacks(
  onImageEditingComplete: (bytes) async {
    var image = await decodeImageFromList(bytes);

    if (image.width != 256 || image.height != 256) {
      // Use the 'image' package to decode and resize
      final original = img.decodeImage(bytes);
      if (original != null) {
        final resized =
            img.copyResize(original, width: 256, height: 256);
        bytes = img.encodePng(resized); // or encodeJpg if needed
      }
    }

    // Handle result bytes
  },
),