Reland "refactor(web): Unify Image on Skwasm and CanvasKit"#188356
Conversation
Introduces EngineImage and BackendImage, with EngineImage handling all of the shared logic for implementing an Image in the Flutter Engine, and BackendImage as a thin wrapper around the native Image object. Another step towards flutter#175630
… to avoid WebGL GPU stalls Using OffscreenCanvas to encode PNG asynchronously requires extracting raw pixels via readPixels first. For GPU-backed textures (where imageSource is null), this readPixels call causes a synchronous WebGL GPU stall that blocks the main thread for seconds and triggers Chrome's aggressive background tab throttling, causing integration tests to fail. By bypassing this fallback for GPU-backed textures and using Skia's native C++ PNG encoder, we avoid the GPU stall entirely, restoring rendering performance and test stability.
There was a problem hiding this comment.
Code Review
This pull request refactors the web engine's image representation by introducing EngineImage as a frontend wrapper that delegates graphics resources to backend-specific implementations (CkImageDelegate and SkwasmImage) via a new BackendImage interface, while managing backing browser resources using reference-counted ImageSource wrappers. The review feedback identifies several critical issues, including potential native memory leaks in scaleImage, SkwasmAnimatedImageDecoder, and createSkwasmImageFromPixels due to missing try-finally blocks around native resource allocations. Additionally, there is a potential use-after-free vulnerability in EngineImage.toByteData in release mode, precision loss in scaleImage due to integer division, and opportunities to simplify repetitive casting in both CanvasKit and Skwasm canvas implementations.
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request refactors the web engine's image handling by introducing 'EngineImage' as a frontend representation that delegates graphics resources to a 'BackendImage' interface, implemented by 'CkImageDelegate' and 'SkwasmImage'. It also extracts shared pixel source logic into a reference-counted 'ImageSource' class. Feedback on these changes suggests optimizing native memory copying in 'SkwasmSurface.rasterizeImage' using 'asTypedList' and adding a defensive assertion in 'unpremultiplyRawRgba' to verify that the pixel buffer length is a multiple of four.
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request refactors the web engine's image handling by introducing the EngineImage and BackendImage abstractions, replacing direct usages of CkImage and SkwasmImage with backend-specific delegates. It also moves ImageSource and its subclasses to a separate primitives file and updates canvases, shaders, renderers, and tests accordingly. Feedback on the changes highlights a runtime issue in image.dart where a JSPromise from convertToBlob() is awaited without calling .toDart, and a potential null-pointer exception in scaleImage when both target dimensions are non-positive.
…188356) Introduces EngineImage and BackendImage, with EngineImage handling all of the shared logic for implementing an Image in the Flutter Engine, and BackendImage as a thin wrapper around the native Image object. Another step towards flutter#175630 ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [AI contribution guidelines] and understand my responsibilities, or I am not using AI tools. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. If this change needs to override an active code freeze, provide a comment explaining why. The code freeze workflow can be overridden by code reviewers. See pinned issues for any active code freezes with guidance. **Note**: The Flutter team is currently trialing the use of [Gemini Code Assist for GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code). Comments from the `gemini-code-assist` bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed. <!-- Links --> [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [AI contribution guidelines]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#ai-contribution-guidelines [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
Introduces EngineImage and BackendImage, with EngineImage handling all of the shared logic for implementing an Image in the Flutter Engine, and BackendImage as a thin wrapper around the native Image object.
Another step towards #175630
Pre-launch Checklist
///).If you need help, consider asking for advice on the #hackers-new channel on Discord.
If this change needs to override an active code freeze, provide a comment explaining why. The code freeze workflow can be overridden by code reviewers. See pinned issues for any active code freezes with guidance.
Note: The Flutter team is currently trialing the use of Gemini Code Assist for GitHub. Comments from the
gemini-code-assistbot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed.