[web] Image.toByteData(format: ui.ImageByteFormat.rawStraightRgba) return wrong format of .png #135409
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Steps to reproduce
I'm trying to get the Uint8List bytes of the .png file by calling the Image.toByteData(format: ui.ImageByteFormat.rawStraightRgba), here are my example codes:
Future<void> _loadImageByteData() async {
ByteData data = await rootBundle.load("assets/agora-logo.png");
Uint8List bytes =
data.buffer.asUint8List(data.offsetInBytes, data.lengthInBytes);
ui.Image image = await decodeImageFromList(bytes);
final byteData =
await image.toByteData(format: ui.ImageByteFormat.rawStraightRgba);
final imageByteData = byteData!.buffer.asUint8List();
for (int i = 0; i < imageByteData.length; i += 4) {
debugPrint(
'r: ${imageByteData[i]}, g: ${imageByteData[i + 1]}, b: ${imageByteData[i + 2]}, a: ${imageByteData[i + 3]}');
}
}Here are the output on the web and native (macOS)
web:
...
r: 255, g: 159, b: 16, a: 32
r: 255, g: 158, b: 11, a: 97
r: 253, g: 158, b: 11, a: 144
r: 254, g: 157, b: 10, a: 183
r: 254, g: 157, b: 9, a: 217
r: 254, g: 158, b: 10, a: 231
r: 254, g: 158, b: 9, a: 244
r: 254, g: 158, b: 10, a: 241
r: 254, g: 158, b: 9, a: 220
r: 254, g: 158, b: 10, a: 199
r: 254, g: 158, b: 10, a: 179
r: 253, g: 158, b: 11, a: 145
r: 255, g: 160, b: 9, a: 83
r: 255, g: 166, b: 13, a: 20
...
native(macOS):
...
r: 16, g: 159, b: 255, a: 32
r: 11, g: 158, b: 255, a: 97
r: 11, g: 158, b: 253, a: 144
r: 10, g: 157, b: 254, a: 183
r: 9, g: 157, b: 254, a: 217
r: 10, g: 158, b: 254, a: 231
r: 9, g: 158, b: 254, a: 244
r: 10, g: 158, b: 254, a: 241
r: 9, g: 158, b: 254, a: 220
r: 10, g: 158, b: 254, a: 199
r: 10, g: 158, b: 254, a: 179
r: 11, g: 158, b: 253, a: 145
r: 9, g: 160, b: 255, a: 83
r: 13, g: 166, b: 255, a: 20
...
It is most likely the Image.toByteData(format: ui.ImageByteFormat.rawStraightRgba) return the bgra format on web.
browser: chrome
renderer: canvaskit
Here's my command:
flutter run -d chrome --web-renderer canvaskit
Expected results
Image.toByteData(format: ui.ImageByteFormat.rawStraightRgba) return the rgba format on web.
Actual results
Image.toByteData(format: ui.ImageByteFormat.rawStraightRgba) not return the rgba format on web.
Code sample
The reproducible demo: https://github.com/littleGnAl/flutter_issue_135409
Clone and run flutter run -d chrome --web-renderer canvaskit
Screenshots or Video
Screenshots / Video demonstration
[Upload media here]
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.13.5, on macOS 13.4.1 22F770820d darwin-x64, locale en-CN)
• Flutter version 3.13.5 on channel stable at /Users/MyUser/dev/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 12fccda598 (6 days ago), 2023-09-19 13:56:11 -0700
• Engine revision bd986c5ed2
• Dart version 3.1.2
• DevTools version 2.25.0
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
• Android SDK at /Users/MyUser/Library/Android/sdk
• Platform android-33, build-tools 32.1.0-rc1
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14E300c
• CocoaPods version 1.11.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2022.3)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
[✓] VS Code (version 1.82.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.72.0
[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-x64 • macOS 13.4.1 22F770820d darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 117.0.5938.92
[✓] Network resources
• All expected network resources are available.
• No issues found!Metadata
Metadata
Assignees
Labels
High-priority issues at the top of the work listLoading, displaying, rendering imagesUI glitches reported at the engine/skia or impeller rendering levelCanvasKit (a.k.a. Skia-on-WebGL) rendering backend for WebFound to occur in 3.13Found to occur in 3.15The 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