[Bug]: Unexpected Behavior From Pixel Ratio

[lcundiff]

Package Version

5.4.2

Flutter Version

3.24.2

Platforms

Android, iOS, Web, macOS

How to reproduce?

1. Set captureOnlyDrawingBounds to true.
2. set pixel ratio to 8 (or any even number)
3. Add transparent background image.
4. Add small content that does not take full width or height of background image
5. Save image and notice that final image is cropped to size of content
6. Now change pixel ratio to 8.5 and save the image. The full background image is shown.

I would expect the pixel ratio to not affect whether the area around the content gets cropped or not, but I cannot figure out why its doing this. The only difference in code between pixel ratio 8 and 8.5 is the pixel ratio, yet the cropping changes.

Logs (optional)

No response

Example code (optional)

                          imageGenerationConfigs: ImageGenerationConfigs(
                            processorConfigs: const ProcessorConfigs(
                              processorMode: ProcessorMode.auto,
                              maxConcurrency: 2, //1-7
                              numberOfBackgroundProcessors: 2,
                            ),
                            generateInsideSeparateThread: true,
                            customPixelRatio: 8,
                            captureOnlyDrawingBounds: true,
                            captureOnlyBackgroundImageArea: true,
                            allowEmptyEditCompletion: false,
                            singleFrame: true,
                            outputFormat: OutputFormat.png,
                            pngLevel: 1,
                          ),

Device Model (optional)

No response

[hm21]

Thank you for reporting this issue.

I identified a problem with captureOnlyDrawingBounds not functioning correctly when captureOnlyBackgroundImageArea is set to true and outsideCaptureAreaLayerOpacity is greater than 0. In this scenario, the editor incorrectly captured the drawing bounds. However, I just released version 6.0.2 which should resolve it.

FYI: When captureOnlyDrawingBounds is set to true and there are transparent areas around your image, the pixel ratio may be downgraded, even if you specify a customPixelRatio. This happens because the editor initially uses the customPixelRatio (or the default image pixel ratio, if none is set) to scale the visible image to the correct size for recording. Afterward, other optimizations take place, such as converting the image to formats like png. If captureOnlyDrawingBounds is true, the editor crops all transparent areas, which then reduces the pixel ratio.

I’m not sure of your exact use case, but in most cases, I recommend not setting a customPixelRatio. Depending on your device's size and pixel ratio, setting a static pixel ratio may result in varying image sizes. Based on the image you showed above, it seems you might want to add layers to a transparent background image. If you're generating the transparent image like I do in this example, I suggest setting the width and height to fixed values for your desired output size. The editor will then automatically calculate the necessary pixel ratio to achieve that size.

[lcundiff]

Thank you for the really helpful explanation. We aren't using customPixelRatio anymore, as our use case doesn't make sense for using it as you pointed out. With the fix released in 6.0.1, our problem should be resolved in regards to not cropping the image to the size of the content. I was surprised that setting the pixel ratio to 4.5, 5, or 7 had fixed the cropping, but I see that was because outsideCaptureAreaLayerOpacity being above 0 caused the editor to capture the incorrect drawing bounds.

Thank you for your help!