[Bug report] WEB - Picture misplaced

[saharvx9]

Version

2.3.0

Platforms

Web

Device Model

Chrome 131

flutter info

[✓] Flutter (Channel stable, 3.24.3, on macOS 14.7.1 23H222 darwin-arm64, locale en-IL)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.1)
[✓] IntelliJ IDEA Community Edition (version 2024.1.1)
[✓] VS Code (version 1.95.2)
[✓] Connected device (3 available)
[✓] Network resources

• No issues found!

How to reproduce?

When using the flutter_image_compress library on Flutter Web, some images appear misaligned or exhibit a "puzzle-like" effect after compression. This issue seems to occur when the library relies on the pica library for image resizing, specifically due to a known bug in Chromium 131.

The pica library maintainers have acknowledged this issue, which is discussed in detail in the following GitHub issue: nodeca/pica#217

Steps to Reproduce:

Use flutter_image_compress on Flutter Web to resize and compress an image.
Test with larger images or high compression ratios.
Observe that some compressed images are misaligned or corrupted.
Root Cause: The underlying issue stems from a rendering bug in Chromium version 131 that affects canvas-based image processing. Since the library uses pica for resizing, it inherits this issue when running on affected versions of Chromium-based browsers.

Proposed Solution:

Update the web implementation of flutter_image_compress to mitigate this issue by:

Handling large images using tiling (if not already implemented).
Replacing or complementing the ctx.drawImage method with a more robust approach, such as ensuring pica handles all resizing tasks.
Verifying that canvas.toDataUrl is producing valid results.
If possible, add a fallback mechanism or compatibility notes for developers working on Chromium-based browsers.

Logs

No response

Example code (optional)

No response

Contact

No response

[khamidjon-khamidov]

I checked the issue you pointed out. For me a workaround was to copy the contents of this script and remove "ww" inside and save it another pica.js file inside web/.

Basically, "ww" is background work which is not working for some browser version including telegram's.

It seems to be temporary workaround

[saharvx9]

I checked the issue you pointed out. For me a workaround was to copy the contents of this script and remove "ww" inside and save it another pica.js file inside web/.

Basically, "ww" is background work which is not working for some browser version including telegram's.

It seems to be temporary workaround

U are jenius thnx!!

I created gist what is needed to removed : https://gist.github.com/saharvx9/7efca740ec1a47ef0a46faa172f9b634