[Web Canvaskit] ImageCodecException for certain JPEG files

[edhom]

Description

Certain JPEG images cannot be processed by flutter web on beta. An ImageCodecException is thrown, stating that the file format could not be detected based on the header. The header however is fine afaic [0xff 0xd8 0xff 0xe2 0x0c 0x58 0x49 0x43 0x43 0x5f]. The problem occurs for us primarily with images downloaded from Google Drive. Comparing the original files and the ones processed by Drive, the progressive Huffman encoding could cause the issue.

	Stable	Beta
Mobile	✅	✅
Web	✅	❌

Steps to Reproduce

You can use the following files and the given code sample to reproduce the issue:

Original	Google Drive processed

Expected results	Actual result

Code sample

import 'package:flutter/material.dart';

void main() {
  runApp(const Example());
}

class Example extends StatelessWidget {
  const Example({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Image.asset('assets/non_drive.jpg'),
        Image.asset('assets/drive.jpg'),
      ],
    );
  }
}

Logs

======== Exception caught by image resource service ================================================
The following ImageCodecException was thrown resolving an image codec:
Failed to detect image file format using the file header.
File header was [0xff 0xd8 0xff 0xe2 0x0c 0x58 0x49 0x43 0x43 0x5f].
Image source: encoded image bytes

When the exception was thrown, this was the stack: 
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 251:49  throw_
lib/_engine/engine/canvaskit/image_web_codecs.dart 52:7                       create
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54            runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5            _async
lib/_engine/engine/canvaskit/image_web_codecs.dart 35:46                      create
lib/_engine/engine/canvaskit/image.dart 15:34                                 skiaInstantiateImageCodec
lib/ui/painting.dart 466:19                                                   instantiateImageCodec
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54            runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5            _async
lib/ui/painting.dart 459:36                                                   instantiateImageCodec
packages/flutter/src/painting/binding.dart 106:15                             instantiateImageCodec
packages/flutter/src/painting/image_provider.dart 684:18                      _loadAsync
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50            <fn>
dart-sdk/lib/async/zone.dart 1434:47                                          _rootRunUnary
dart-sdk/lib/async/zone.dart 1335:19                                          runUnary
dart-sdk/lib/async/future_impl.dart 156:18                                    handleValue
dart-sdk/lib/async/future_impl.dart 740:44                                    handleValueCallback
dart-sdk/lib/async/future_impl.dart 769:13                                    _propagateToListeners
dart-sdk/lib/async/future_impl.dart 575:5                                     [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 613:7                                     <fn>
dart-sdk/lib/async/zone.dart 1426:13                                          _rootRun
dart-sdk/lib/async/zone.dart 1328:19                                          run
dart-sdk/lib/async/zone.dart 1236:7                                           runGuarded
dart-sdk/lib/async/zone.dart 1276:23                                          callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                              _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                               _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 166:15           <fn>
Image provider: AssetImage(bundle: null, name: "assets/drive.jpg")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#27d86(), name: "assets/drive.jpg", scale: 1)

Analyzing bug...                                                        
No issues found! (ran in 2.1s)

[✓] Flutter (Channel beta, 2.11.0-0.1.pre, on macOS 11.4 20F71 darwin-x64, locale en-US)
    • Flutter version 2.11.0-0.1.pre at /Library/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b101bfe32f (4 weeks ago), 2022-02-16 07:36:54 -0800
    • Engine revision e355993572
    • Dart version 2.17.0 (build 2.17.0-69.2.beta)
    • DevTools version 2.10.0-dev.1

[maheshj01]

Hi @edhom, Thanks for filing the issue. I am able to reproduce the issue the drive image failed to load on beta and the master channel while it loads fine on the stable channel.

import 'package:flutter/material.dart';

void main() {
  runApp(const Example());
}

class Example extends StatelessWidget {
  const Example({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Image.asset('assets/original.jpeg'),
        Image.asset('assets/drive.jpeg'), ///  fails to load
      ],
    );
  }
}

Note that this issue is with Canvaskit, Image loads fine with HTML renderer

stable	beta/master

master logs

mahesh@Maheshs-MacBook-Air-M1 test_app % flutter run -d chrome
Running "flutter pub get" in test_app...                         1,198ms
Launching lib/main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...              9.1s
DartUri: Unresolved uri: dart:web_sql
DartUri: Unresolved uri: dart:ui
This app is linked to the debug service: ws://127.0.0.1:64777/lagj6aYaBIU=/ws
Debug service listening on ws://127.0.0.1:64777/lagj6aYaBIU=/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:64777/lagj6aYaBIU=
The Flutter DevTools debugger and profiler on Chrome is available at:
http://127.0.0.1:9101?uri=http://127.0.0.1:64777/lagj6aYaBIU=
══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
The following ImageCodecException was thrown resolving an image codec:
Failed to detect image file format using the file header.
File header was [0xff 0xd8 0xff 0xe2 0x0c 0x58 0x49 0x43 0x43 0x5f].
Image source: encoded image bytes

When the exception was thrown, this was the stack:
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 251:49  throw_
lib/_engine/engine/canvaskit/image_web_codecs.dart 52:7                       create
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54            runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5            _async
lib/_engine/engine/canvaskit/image_web_codecs.dart 35:46                      create
lib/_engine/engine/canvaskit/image.dart 15:34
skiaInstantiateImageCodec
lib/ui/painting.dart 466:19                                                   instantiateImageCodec
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54            runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5            _async
lib/ui/painting.dart 459:36                                                   instantiateImageCodec
packages/flutter/src/painting/binding.dart 109:15                             instantiateImageCodec
packages/flutter/src/painting/image_provider.dart 684:18                      _loadAsync
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50            <fn>
dart-sdk/lib/async/zone.dart 1434:47                                          _rootRunUnary
dart-sdk/lib/async/zone.dart 1335:19                                          runUnary
dart-sdk/lib/async/future_impl.dart 147:18                                    handleValue
dart-sdk/lib/async/future_impl.dart 766:44                                    handleValueCallback
dart-sdk/lib/async/future_impl.dart 795:13                                    _propagateToListeners
dart-sdk/lib/async/future_impl.dart 566:5                                     [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 639:7                                     <fn>
dart-sdk/lib/async/zone.dart 1426:13                                          _rootRun
dart-sdk/lib/async/zone.dart 1328:19                                          run
dart-sdk/lib/async/zone.dart 1236:7                                           runGuarded
dart-sdk/lib/async/zone.dart 1276:23                                          callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                              _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                               _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 166:15           <fn>

Image provider: AssetImage(bundle: null, name: "assets/drive.jpeg")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#02960(), name: "assets/drive.jpeg",
  scale: 1)
════════════════════════════════════════════════════════════════════════════════════════════════════

flutter doctor -v (stable/beta/master)

[✓] Flutter (Channel stable, 2.10.3, on macOS 12.1 21C52 darwin-arm, locale en-GB)
    • Flutter version 2.10.3 at /Users/mahesh/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7e9793dee1 (20 hours ago), 2022-03-02 11:23:12 -0600
    • Engine revision bd539267b4
    • Dart version 2.16.1
    • 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-31, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • 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 4.2)
    • 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.8+10-b944.6916264)

[✓] 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.63.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.36.0

[✓] Connected device (3 available)
    • Redmi K20 Pro (mobile) • 192.168.1.5:5555 • android-arm64  • Android 11 (API 30)
    • macOS (desktop)        • macos            • darwin-arm64   • macOS 12.1 21C52 darwin-arm
    • Chrome (web)           • chrome           • web-javascript • Google Chrome 99.0.4844.51

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

• No issues found!

[✓] Flutter (Channel beta, 2.11.0-0.1.pre, on macOS 12.2.1 21D62 darwin-arm, locale en-GB)
    • Flutter version 2.11.0-0.1.pre at /Users/mahesh/Documents/flutter_beta
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b101bfe32f (4 weeks ago), 2022-02-16 07:36:54 -0800
    • Engine revision e355993572
    • Dart version 2.17.0 (build 2.17.0-69.2.beta)
    • DevTools version 2.10.0-dev.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • 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 4.2)
    • 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.8+10-b944.6916264)

[✓] 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.63.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.36.0

[✓] Connected device (3 available)
    • Redmi K20 Pro (mobile) • 192.168.1.3:5555 • android-arm64  • Android 11 (API 30)
    • macOS (desktop)        • macos            • darwin-arm64   • macOS 12.2.1 21D62 darwin-arm
    • Chrome (web)           • chrome           • web-javascript • Google Chrome 99.0.4844.51

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

• No issues found!

[✓] Flutter (Channel master, 2.11.0-0.0.pre.715, on macOS 12.1 21C52 darwin-arm, locale en-GB)
    • Flutter version 2.11.0-0.0.pre.715 at /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 8b95cd6f35 (7 hours ago), 2022-02-28 16:31:12 -0800
    • Engine revision 615a60512c
    • Dart version 2.17.0 (build 2.17.0-150.0.dev)
    • DevTools version 2.11.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • 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 4.2)
    • 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.8+10-b944.6916264)

[✓] 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.63.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.34.0

[✓] Connected device (4 available)
    • Redmi K20 Pro (mobile) • 192.168.1.2:5555                     • android-arm64  • Android 11 (API 30)
    • iPhone 13 Pro (mobile) • CBEF6BFA-D3DC-4680-8900-E01C62A4B04C • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-15-2 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.1 21C52 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 98.0.4758.109

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

! Doctor found issues in 1 category.

[maheshj01]

cc: @yjbanov