Downscaled Preview, Full-Res Export: Can Edits Be Reapplied to the Original?

[yangheecho]

Hi! We’re running into crashes on iOS due to memory limits when loading very large images (e.g., 6000×4000+) into the editor. For stability, we’d like to use a downscaled image for the editor preview, but at the final export step, re-apply the exact same edits to the original full-resolution image to produce a high-res output. Does the library support this workflow (non-destructive editing / applying the recorded operations to the original), or is there an API or recommended approach to achieve it?

[hm21]

Currently, that’s not directly possible. However, you can try the following options.

If your image is always smaller than 8192x8192

On iOS, the texture limit is usually 8192×8192. If you stay below that but still experience crashes, it’s likely because too much data is being loaded into RAM and the CPU. To handle this, you can do the following:

First, disable background generation after every change. Normally, this feature helps achieve faster results, but with such large images, it will just overload the CPU and provide no real benefit. Disabling it also reduces RAM usage, since temporary results are stored in memory by default (up to 100 results if not otherwise configured).

Example configs:

configs: const ProImageEditorConfigs(
  imageGeneration: ImageGenerationConfigs(
    enableBackgroundGeneration: false,
    processorConfigs: ProcessorConfigs(
      processorMode: ProcessorMode.minimum,
    ),
    enableUseOriginalBytes: false,
    // maxOutputSize: Size(6000,400),
  ),
),

Next, open the editor with a low-resolution version of your image. When the user presses the “Done” button, quickly switch to the high-resolution image. Make sure to use a custom AppBar, as shown in the examples, so you can control when the user finishes editing and replace the background image at that point.

Note: This will still load the high-resolution image into RAM, but only during the final generation phase.

Example to replace the image:

final editor = editorKey.currentState!;
await editor.updateBackgroundImage(
  EditorImage(byteArray: _highResolutionImage),
);
editor.doneEditing();

If your image could be bigger than 8192x8192

Follow the steps above, but don’t replace the background image in the last step.

In this case, you’ll handle it similarly to how it's done when editing videos, by using the onCompleteWithParameters callback. This callback provides all the applied settings, such as rotation, color matrix, and other adjustments.

You can then use these parameters to apply the same changes to your original high-resolution image step by step. This can be done on the native side, in Dart, or even on your backend.

Just keep in mind that you’ll need to write the code yourself to apply these parameters, but honestly, it’s not that complex. I did something similar in the video editor, the only difference being that it was for videos instead of images.

  callbacks: ProImageEditorCallbacks(
    onCompleteWithParameters: (parameters) {
      print(parameters);
    },
  ),