[web] encodeJPG introduces Artefacts on web

[ltOgt]

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

1. Create a new flutter project with support for web and macos
2. Add blurhash_dart: ^1.0.2 to pubspec.yaml

• (the bug is not related to this package, it just makes it easier to reproduce)

3. Replace main.dart with the following code
4. Run on both web and macos

main.dart:

import 'dart:convert';
import 'dart:typed_data';

import 'package:blurhash_dart/blurhash_dart.dart';
import 'package:flutter/material.dart';
import 'package:image/image.dart' as img;

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

/// Using a blurhash to encode the image with a small footprint for this example
/// The bug is not related to the blur hash or the blur hash package
Uint8List decodeBlurHash({required String blurHash, required int width, required int height}) {
  final blurImg = BlurHash.decode(blurHash).toImage(width, height);

  /// This is identical on web and macos
  /// Feel free to verify by copying this into one file per platform and running "diff" on them
  final base64 = base64Encode((blurImg.data as img.ImageDataUint8).data);

  /// This has an unexpected result on web
  return Uint8List.fromList(img.encodeJpg(blurImg)); // <============================= BUG
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: Scaffold(
        body: SizedBox(
          width: 600,
          height: 450,
          child: FittedBox(
            child: Image.memory(
              // The bug is not related to blur hash decoding
              // its just simpler to reproduce this way
              decodeBlurHash(
                blurHash: "WqGvO}RioeoffPj[_4WBWBayayfQozWDR*WBayayWBazWBayayay",
                width: 60,
                height: 45,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Expected results

The JPG encoded image should be identical on web and on macos

Actual results

The JPG encoded image has artefacts on web:

Note the bottom edge of the image on web

Interestingly, reloading web results in slightly different artefacts each time:

Code sample

Same as above in the steps to reproduce:

main.dart:

import 'dart:convert';
import 'dart:typed_data';

import 'package:blurhash_dart/blurhash_dart.dart';
import 'package:flutter/material.dart';
import 'package:image/image.dart' as img;

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

/// Using a blurhash to encode the image with a small footprint for this example
/// The bug is not related to the blur hash or the blur hash package
Uint8List decodeBlurHash({required String blurHash, required int width, required int height}) {
  final blurImg = BlurHash.decode(blurHash).toImage(width, height);

  /// This is identical on web and macos
  /// Feel free to verify by copying this into one file per platform and running "diff" on them
  final base64 = base64Encode((blurImg.data as img.ImageDataUint8).data);

  /// This has an unexpected result on web
  return Uint8List.fromList(img.encodeJpg(blurImg)); // <============================= BUG
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: Scaffold(
        body: SizedBox(
          width: 600,
          height: 450,
          child: FittedBox(
            child: Image.memory(
              // The bug is not related to blur hash decoding
              // its just simpler to reproduce this way
              decodeBlurHash(
                blurHash: "WqGvO}RioeoffPj[_4WBWBayayfQozWDR*WBayayWBazWBayayay",
                width: 60,
                height: 45,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

Same as in expected results above

Screenshots / Video demonstration

Interestingly, reloading web results in slightly different artefacts each time:

Logs

None

Flutter Doctor output

Tested both on stable and on master

Doctor output (stable)

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.4, on macOS 13.4 22F66 darwin-arm64, locale en-DE)
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] VS Code (version 1.79.0)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 1 category.

Doctor output (master)

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 3.12.0-10.0.pre.36, on macOS 13.4 22F66 darwin-arm64, locale en-DE)
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] VS Code (version 1.79.0)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 1 category.

[darshankawar]

Thanks for the detailed report. I am able to replicate this using canvaskit only, as with html renderer, the artifacts are not displayed.

stable, master flutter doctor -v

[!] Flutter (Channel stable, 3.10.5, on macOS 12.2.1 21D62 darwin-x64, locale
    en-GB)
    • Flutter version 3.10.5 on channel stable at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 796c8ef792 (2 days ago), 2023-06-13 15:51:02 -0700
    • Engine revision 45f6e00911
    • Dart version 3.0.5
    • DevTools version 2.23.1
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

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

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

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

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

! Doctor found issues in 1 category.

[!] Flutter (Channel master, 3.12.0-11.0.pre.32, on macOS 12.2.1 21D62
    darwin-x64, locale en-GB)
    • Flutter version 3.12.0-11.0.pre.32 on channel master at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7dbdacff46 (3 hours ago), 2023-06-26 22:05:23 -0400
    • Engine revision f320b8c36f
    • Dart version 3.1.0 (build 3.1.0-246.0.dev)
    • DevTools version 2.24.0
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/dhs/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for
      more details.

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

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

[✓] IntelliJ IDEA Ultimate Edition (version 2021.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 65.1.4
    • Dart plugin version 213.7228

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

[✓] Connected device (3 available)
    • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios
      • iOS 15.3.1 19D52
    • macOS (desktop)           • macos                                    •
      darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)              • chrome                                   •
      web-javascript • Google Chrome 109.0.5414.119

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.
      
[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

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

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

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

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

! Doctor found issues in 1 category.

[yjbanov]

Thanks for reporting. How does the output compare to Firefox and Safari?

Background: HTML, macOS, and CanvasKit use different image decoding methods. HTML uses the <img> tag. macOS uses Skia built-in codecs. CanvasKit uses ImageDecoder. Even though the HTML version doesn't produce green lines, it seems it still has some sort of gradient/blur at the edges.

[ltOgt]

Chrome / Firefox / Safari

CanvasKit:

HTML:

Seems like the blurry edges with HTML also only show in chrome

[Gyeony95]

@ltOgt On the web, instead of using encodeJpg, use the code below.

Future<Uint8List?> imageToUInt8List(DartImage.Image image) async {
   final canvas = html.CanvasElement(width: image.width, height: image.height);
   final ctx = canvas.context2D;
   final imageData = _convertDartImageToImageData(image);
   ctx.putImageData(imageData, 0, 0);
   final blob = await canvas.toBlob('image/jpg');
   final completer = Completer<Uint8List>();
   final reader = html.FileReader();
   reader.onLoadEnd.listen((event) {
     if (reader.result is Uint8List) {
       completer.complete(reader.result as Uint8List);
     } else {
       // ignore: null_argument_to_non_null_type
       completer.complete(null);
     }
   });
   reader.readAsArrayBuffer(blob);
   return completer.future;
 }
 
   html.ImageData _convertDartImageToImageData(DartImage.Image image) {
   final int width = image.width;
   final int height = image.height;
   final rgbaPixels = image.getBytes(order: DartImage.ChannelOrder.rgba);
   Uint8ClampedList correctedRgbaPixels = Uint8ClampedList.fromList(rgbaPixels);
   return html.ImageData(correctedRgbaPixels, width, height);
 }

[zambetpentru]

Do you think this is the same issue?

Only appears on Canvaskit, not HTML or Native: