[Web][Canvaskit]: Mixed byte order in result of Image.toByteData() using format: ui.ImageByteFormat.rawRgba #144770
Description
Steps to reproduce
- Call test() method in the attached code snippet on canvaskit renderer
- Using the default rawRgba, the bytes of the first pixel are in RGBA order, but others are in BGRA instead of RGBA
- Using rawStraightRgba, all pixel data are in BGRA instead of RGBA
- Running test() method on html renderer the results look good
Expected results
Response Bytes: [66, 77, 70, 0, 0, 0, 0, 0, 0, 0, 54, 0, 0, 0, 40, 0, 0, 0, 2, 0, 0, 0, 2, 0, 0, 0, 1, 0, 24, 0, 0, 0, 0, 0, 16, 0, 0, 0, 195, 14, 0, 0, 195, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 232, 162, 0, 39, 127, 255, 0, 0, 76, 177, 34, 36, 28, 237, 0, 0]
Image Bytes (rawRgba): [34, 177, 76, 255, 237, 28, 36, 255, 0, 162, 232, 255, 255, 127, 39, 255]
Image Bytes (rawStraightRgba): [34, 177, 76, 255, 237, 28, 36, 255, 0, 162, 232, 255, 255, 127, 39, 255]
Actual results
Response Bytes: [66, 77, 70, 0, 0, 0, 0, 0, 0, 0, 54, 0, 0, 0, 40, 0, 0, 0, 2, 0, 0, 0, 2, 0, 0, 0, 1, 0, 24, 0, 0, 0, 0, 0, 16, 0, 0, 0, 195, 14, 0, 0, 195, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 232, 162, 0, 39, 127, 255, 0, 0, 76, 177, 34, 36, 28, 237, 0, 0]
Image Bytes (rawRgba): [34, 177, 76, 255, 36, 28, 237, 255, 232, 162, 0, 255, 39, 127, 255, 255]
Image Bytes (rawStraightRgba): [76, 177, 34, 255, 36, 28, 237, 255, 232, 162, 0, 255, 39, 127, 255, 255]
Code sample
Code sample
Future test(String url) async {
var imgData = await _downloadImage(url);
print("Response Bytes: " + imgData.toString());
final image = await _loadImage(imgData);
final ByteData? rawRgbaBytes = await image.toByteData();
if (rawRgbaBytes != null) {
print("Image Bytes (rawRgba): " + rawRgbaBytes.buffer.asUint8List().toString());
}
final ByteData? rawStraightRgbaBytes = await image.toByteData(format: ui.ImageByteFormat.rawStraightRgba);
if (rawStraightRgbaBytes != null) {
print("Image Bytes (rawStraightRgba): " + rawStraightRgbaBytes.buffer.asUint8List().toString());
}
}
Future<Uint8List> _downloadImage(String url) async {
http.Response response = await http.get(Uri.parse(url));
return response.bodyBytes;
}
Future<ui.Image> _loadImage(Uint8List list) async {
final completer = Completer<ui.Image>();
ui.decodeImageFromList(list, completer.complete);
return completer.future;
}Screenshots or Video
Screenshots / Video demonstration
[Upload media here]
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
[√] Flutter (Channel stable, 3.16.5, on Microsoft Windows [Version 10.0.22631.3007], locale en-US)
• Flutter version 3.16.5 on channel stable at C:\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 78666c8dc5 (3 months ago), 2023-12-19 16:14:14 -0800
• Engine revision 3f3e560236
• Dart version 3.2.3
• DevTools version 2.28.4
[√] Windows Version (Installed version of Windows is version 10 or higher)
[X] Android toolchain - develop for Android devices
X Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.
[√] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
[!] Visual Studio - develop Windows apps (Visual Studio Professional 2022 17.8.6)
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Professional
• Visual Studio Professional 2022 version 17.8.34525.116
X Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop development with C++" workload, and include these components:
MSVC v142 - VS 2019 C++ x64/x86 build tools
- If there are multiple build tool versions available, install the latest
C++ CMake tools for Windows
Windows 10 SDK
[!] Android Studio (not installed)
• Android Studio not found; download from https://developer.android.com/studio/index.html
(or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
[√] VS Code (version 1.87.0)
• VS Code at C:\Users\lpeter\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.84.0
[√] Connected device (3 available)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22631.3007]
• Chrome (web) • chrome • web-javascript • Google Chrome 122.0.6261.95
• Edge (web) • edge • web-javascript • Microsoft Edge 122.0.2365.66
[√] Network resources
• All expected network resources are available.
! Doctor found issues in 3 categories.Metadata
Metadata
Assignees
Labels
High-priority issues at the top of the work listCanvasKit (a.k.a. Skia-on-WebGL) rendering backend for Webflutter/engine related. See also e: labels.Found to occur in 3.19Found to occur in 3.21The issue has been confirmed reproducible and is ready to work onWeb applications specificallyIssue is closed as already fixed in a newer versionOwned by Web platform teamTriaged by Web platform team