[web][Canvaskit]: App throws Error: Failed to encode the image into bytes. while decoding images into bytes. #102683
Description
Steps to Reproduce
- Install flutter_file_picker (or use another method to get the data in a variable)
- Put this action in a button
- Run the action (set the web renderer to canvaskit and use the chrome browser)
- See the error
Expected results:
The data should get successfully compiled. I tried it on firefox and the native platforms (android, linux, windows) and it works.
Actual results:
An error (see logs)
Code sample
var files = await FilePicker.platform.pickFiles(
type: FileType.image, allowMultiple: false, withData: true);
if (files?.files.isEmpty ?? true) return;
final e = files!.files.first;
var content = e.bytes!;
print(base64Encode(content));
ui.Codec codec;
try {
codec = await ui
.instantiateImageCodec(content);
} catch (e) {
if (kDebugMode) {
print(e);
}
return;
}
var frame = await codec.getNextFrame();
var image = frame.image.clone();
var bytes = await image.toByteData(format: ui.ImageByteFormat.png);
print(bytes.toString());Logs
Error: Failed to encode the image into bytes.
at Object.createErrorWithStack (http://localhost:56226/dart_sdk.js:5093:12)
at Function._throw (http://localhost:56226/dart_sdk.js:20399:18)
at Function.throwWithStackTrace (http://localhost:56226/dart_sdk.js:20396:18)
at async._AsyncCallbackEntry.new.callback (http://localhost:56226/dart_sdk.js:40921:18)
at Object._microtaskLoop (http://localhost:56226/dart_sdk.js:40778:13)
at _startMicrotaskLoop (http://localhost:56226/dart_sdk.js:40784:13)
at http://localhost:56226/dart_sdk.js:36261:9
and the debugger stops in the line codec = await ui.instantiateImageCodec(content);
flutter analyze
Analyzing app...
No issues found! (ran in 2.6s)
[✓] Flutter (Channel beta, 2.13.0-0.2.pre, on Microsoft Windows [Version 10.0.22000.652], locale de-DE)
• Flutter version 2.13.0-0.2.pre at C:\src\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 8662e22bac (7 days ago), 2022-04-20 08:21:52 -0700
• Engine revision 24a02fa5ee
• Dart version 2.17.0 (build 2.17.0-266.5.beta)
• DevTools version 2.12.2
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
• Android SDK at C:\src\Android
• Platform android-32, build-tools 32.0.0
• ANDROID_HOME = C:\src\Android
• Java binary at: C:\Program Files\Eclipse Adoptium\jdk-17.0.2.8-hotspot\bin\java.exe
• Java version OpenJDK Runtime Environment Temurin-17.0.2+8 (build 17.0.2+8)
• All Android licenses accepted.
[✓] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
[☠] Visual Studio - develop for Windows (the doctor check crashed)
✗ Due to an error, the doctor check did not complete. If the error message below is not helpful, please let us know
about this issue at https://github.com/flutter/flutter/issues. (This is already reported here: #102451
[!] 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).
[✓] IntelliJ IDEA Ultimate Edition (version 2021.3)
• IntelliJ at C:\Users\wusel\AppData\Local\JetBrains\Toolbox\apps\IDEA-U\ch-0\213.7172.25
• 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
[✓] IntelliJ IDEA Ultimate Edition (version 2022.1)
• IntelliJ at C:\Users\wusel\AppData\Local\JetBrains\Toolbox\apps\IDEA-U\ch-0\221.5080.210
• 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
[✓] VS Code (version 1.66.2)
• VS Code at C:\Users\wusel\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.39.20220405
[✓] Connected device (2 available)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22000.652]
• Chrome (web) • chrome • web-javascript • Google Chrome 101.0.4951.41
[✓] HTTP Host Availability
• All required HTTP hosts are available
! Doctor found issues in 2 categories.
I'm using the latest chromium 100.0.4896.127
Preview in a running web app
This problem can be seen in my note taking app: https://preview.butterfly.linwood.dev
Try clicking on the background add click on insert. Then click on image and choose a random png image. In the console you get an error. On firefox everything works.
Metadata
Metadata
Assignees
Labels
High-priority issues at the top of the work listLoading, displaying, rendering imagesCanvasKit (a.k.a. Skia-on-WebGL) rendering backend for Webflutter/engine related. See also e: labels.Found to occur in 2.10Found to occur in 2.13The issue has been confirmed reproducible and is ready to work onWeb applications specificallyIssue is closed as already fixed in a newer version