Skip to content

[web][Canvaskit]: App throws Error: Failed to encode the image into bytes. while decoding images into bytes. #102683

Closed
flutter-team-archive/engine
#36299
Closed
[web][Canvaskit]: App throws Error: Failed to encode the image into bytes. while decoding images into bytes.#102683
flutter-team-archive/engine
#36299
Assignees
harryterkelsen
Labels
P1High-priority issues at the top of the work lista: imagesLoading, displaying, rendering imagese: web_canvaskitCanvasKit (a.k.a. Skia-on-WebGL) rendering backend for Webengineflutter/engine related. See also e: labels.found in release: 2.10Found to occur in 2.10found in release: 2.13Found to occur in 2.13has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyr: fixedIssue is closed as already fixed in a newer version

Description

@CodeDoctorDE
CodeDoctorDE
opened on Apr 27, 2022

Steps to Reproduce

  1. Install flutter_file_picker (or use another method to get the data in a variable)
  2. Put this action in a button
  3. Run the action (set the web renderer to canvaskit and use the chrome browser)
  4. 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

P1High-priority issues at the top of the work lista: imagesLoading, displaying, rendering imagese: web_canvaskitCanvasKit (a.k.a. Skia-on-WebGL) rendering backend for Webengineflutter/engine related. See also e: labels.found in release: 2.10Found to occur in 2.10found in release: 2.13Found to occur in 2.13has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyr: fixedIssue is closed as already fixed in a newer version

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions