Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Flutter 3.0 Web] Image.toByteData fails with error: Uncaught (in promise) Error: Failed to encode the image into bytes. #104197

Closed
javaddict opened this issue May 19, 2022 · 3 comments
Closed

[Flutter 3.0 Web] Image.toByteData fails with error: Uncaught (in promise) Error: Failed to encode the image into bytes. #104197

javaddict opened this issue May 19, 2022 · 3 comments
Labels
c: regression It was better in the past than it is now engine flutter/engine repository. See also e: labels. found in release: 3.0 Found to occur in 3.0 found in release: 3.1 Found to occur in 3.1 has reproducible steps The issue has been confirmed reproducible and is ready to work on platform-web Web applications specifically r: duplicate Issue is closed as a duplicate of an existing issue

Comments

@javaddict
Copy link

The API toByteData() stop working when upgrading to Flutter 3.0. It happens only on the web platform.

Steps to Reproduce

Please check out this dartpad.
When using the old channel (2.10.5), the DartPad console shows some messages, proving that toByteData() is successfully executed. But when switching to the stable channel (3.0.0), nothing is shown. I looked at the console log of the browser and here are the error messages:

Uncaught (in promise) Error: Failed to encode the image into bytes.           errors.dart:284
    

    at Object.createErrorWithStack (errors.dart:284:10)
    at Function._throw (core_patch.dart:341:28)
    at Function.throwWithStackTrace (errors.dart:109:5)
    at async._AsyncCallbackEntry.new.callback (zone.dart:1413:11)
    at Object._microtaskLoop (schedule_microtask.dart:40:11)
    at _startMicrotaskLoop (schedule_microtask.dart:49:5)
    at async_patch.dart:166:15
@maheshmnj maheshmnj added the in triage Presently being triaged by the triage team label May 20, 2022
@maheshmnj
Copy link
Member

maheshmnj commented May 20, 2022 •
edited
Loading

Hi @javaddict, Thanks for filing the issue. I am able to reproduce the issue on stable and the master channel. image.toByteData fails on the web in flutter 3 and works on other platforms, while on stable 2.10.5 it works on all platforms including the web.

flutter 2.10.5

mahesh@Maheshs-MacBook-Air-M1 arabic_json_proplem % flutter run -d chrome
Launching lib/main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...             13.7s
This app is linked to the debug service: ws://127.0.0.1:60762/mLtDKfMalUc=/ws
Debug service listening on ws://127.0.0.1:60762/mLtDKfMalUc=/ws

💪 Running with sound null safety 💪

🔥  To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".

An Observatory debugger and profiler on Chrome is available at:
http://127.0.0.1:60762/mLtDKfMalUc=
The Flutter DevTools debugger and profiler on Chrome is available at:
http://127.0.0.1:9100?uri=http://127.0.0.1:60762/mLtDKfMalUc=
================================================================
250000 in bytes.
================================================================

flutter 3.0

Launching lib/main.dart on Chrome in debug mode...
This app is linked to the debug service: ws://127.0.0.1:60490/MFAwHe6vos8=/ws
Debug service listening on ws://127.0.0.1:60490/MFAwHe6vos8=/ws
💪 Running with sound null safety 💪
Connecting to VM Service at ws://127.0.0.1:60490/MFAwHe6vos8=/ws
Flutter Web Bootstrap: Programmatic
Error: Failed to encode the image into bytes.
    at Object.createErrorWithStack (http://localhost:60451/dart_sdk.js:5093:12)
    at Function._throw (http://localhost:60451/dart_sdk.js:20399:18)
    at Function.throwWithStackTrace (http://localhost:60451/dart_sdk.js:20396:18)
    at async._AsyncCallbackEntry.new.callback (http://localhost:60451/dart_sdk.js:40921:18)
    at Object._microtaskLoop (http://localhost:60451/dart_sdk.js:40778:13)
    at _startMicrotaskLoop (http://localhost:60451/dart_sdk.js:40784:13)
    at http://localhost:60451/dart_sdk.js:36261:9

Adding a regression label since this works fine on stable 2.10.5

flutter doctor -v (2.10.5) 
[✓] Flutter (Channel unknown, 2.10.5, on macOS 12.3 21E230 darwin-arm, locale en-IN)
    • Flutter version 2.10.5 at /Users/mahesh/Documents/flutter_dev
    • Upstream repository unknown
    • Framework revision 5464c5bac7 (5 weeks ago), 2022-04-18 09:55:37 -0700
    • Engine revision 57d3bac3dd
    • Dart version 2.16.2
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.10.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • 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 11.0.11+0-b60-7772763)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.66.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.40.0

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 19FD0231-BFF0-441D-B584-AD94C4084525 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-15-2 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS
      12.3 21E230 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google
      Chrome 101.0.4951.64

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!
flutter doctor -v (mac) 
[✓] Flutter (Channel stable, 3.0.0, on macOS 12.3 21E230 darwin-arm, locale en-IN)
    • Flutter version 3.0.0 at /Users/mahesh/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ee4e09cce0 (6 days ago), 2022-05-09 16:45:18 -0700
    • Engine revision d1b9a6938a
    • Dart version 2.17.0
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! CocoaPods 1.10.2 out of date (1.11.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your
        plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • 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 11.0.11+0-b60-7772763)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.66.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.40.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.3 21E230 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 101.0.4951.64

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

    • Flutter version 3.1.0-0.0.pre.419 at /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2eed8cbf93 (2 weeks ago), 2022-04-28 22:29:06 -0400
    • Engine revision dfdfe0b3b0
    • Dart version 2.18.0 (build 2.18.0-66.0.dev)
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! CocoaPods 1.10.2 out of date (1.11.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your
        plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • 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 11.0.11+0-b60-7772763)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.66.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.40.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.3 21E230 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 101.0.4951.64

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

@maheshmnj maheshmnj added engine flutter/engine repository. See also e: labels. platform-web Web applications specifically has reproducible steps The issue has been confirmed reproducible and is ready to work on found in release: 3.0 Found to occur in 3.0 found in release: 3.1 Found to occur in 3.1 c: regression It was better in the past than it is now and removed in triage Presently being triaged by the triage team labels May 20, 2022
@maheshmnj maheshmnj changed the title Flutter 3.0, Web platform, dart:ui / Image / toByteData() is not working. [Flutter 3.0 Web] Image.toByteData fails with error: Uncaught (in promise) Error: Failed to encode the image into bytes. May 20, 2022
@jason-simmons jason-simmons mentioned this issue May 21, 2022
Closed
@doppio doppio mentioned this issue May 21, 2022
Closed
@yjbanov
Copy link
Contributor

yjbanov commented May 26, 2022

Deduplicating into #103803

@yjbanov yjbanov closed this as not planned Won't fix, can't repro, duplicate, stale May 26, 2022
@maheshmnj maheshmnj added the r: duplicate Issue is closed as a duplicate of an existing issue label May 27, 2022
@github-actions
Copy link

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jun 10, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
c: regression It was better in the past than it is now engine flutter/engine repository. See also e: labels. found in release: 3.0 Found to occur in 3.0 found in release: 3.1 Found to occur in 3.1 has reproducible steps The issue has been confirmed reproducible and is ready to work on platform-web Web applications specifically r: duplicate Issue is closed as a duplicate of an existing issue
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@yjbanov @javaddict @maheshmnj