eagerly decode

lib/web_ui/lib/src/engine/canvaskit/image.dart

@@ -4,6 +4,7 @@
 
 import 'dart:async';
 import 'dart:js_interop';
+import 'dart:math' as math;
 import 'dart:typed_data';
 
 import 'package:ui/src/engine.dart';
@@ -14,16 +15,20 @@ import 'package:ui/ui_web/src/ui_web.dart' as ui_web;
 Future<ui.Codec> skiaInstantiateImageCodec(Uint8List list,
     [int? targetWidth, int? targetHeight]) async {
   ui.Codec codec;
-  print('browser supports image decoder? $browserSupportsImageDecoder');
+  // ImageDecoder does not detect image type automatically. It requires us to
+  // tell it what the image type is.
+  final String contentType = tryDetectContentType(list, 'encoded image bytes');
+
   if (browserSupportsImageDecoder) {
     codec = await CkBrowserImageDecoder.create(
       data: list,
+      contentType: contentType,
       debugSource: 'encoded image bytes',
     );
   } else {
     // TODO(harryterkelsen): If the image is animated, then use Skia to decode.
     final DomBlob blob = createDomBlob(<dynamic>[list.buffer]);
-    codec = CkImageBlobCodec(blob);
+    codec = await decodeBlobToCkImage(blob);
   }
   return ResizingCodec(
     codec,
@@ -90,6 +95,13 @@ class CkImageBlobCodec extends HtmlBlobCodec {
   }
 }
 
+/// Creates and decodes an image using HtmlImageElement.
+Future<CkImageBlobCodec> decodeBlobToCkImage(DomBlob blob) async {
+  final CkImageBlobCodec codec = CkImageBlobCodec(blob);
+  await codec.decode();
+  return codec;
+}
+
 void skiaDecodeImageFromPixels(
   Uint8List pixels,
   int width,
@@ -227,8 +239,10 @@ const String _kNetworkImageMessage = 'Failed to load network image.';
 Future<ui.Codec> skiaInstantiateWebImageCodec(
     String url, ui_web.ImageCodecChunkCallback? chunkCallback) async {
   final Uint8List list = await fetchImage(url, chunkCallback);
+  final String contentType = tryDetectContentType(list, url);
   if (browserSupportsImageDecoder) {
-    return CkBrowserImageDecoder.create(data: list, debugSource: url);
+    return CkBrowserImageDecoder.create(
+        data: list, contentType: contentType, debugSource: url);
   } else {
     return CkAnimatedImage.decodeFromBytes(list, url);
   }
@@ -455,3 +469,25 @@ class CkImage implements ui.Image, StackTraceDebugger {
     return '[$width\u00D7$height]';
   }
 }
+
+/// Detect the content type or throw an error if content type can't be detected.
+String tryDetectContentType(Uint8List data, String debugSource) {
+  // ImageDecoder does not detect image type automatically. It requires us to
+  // tell it what the image type is.
+  final String? contentType = detectContentType(data);
+
+  if (contentType == null) {
+    final String fileHeader;
+    if (data.isNotEmpty) {
+      fileHeader =
+          '[${bytesToHexString(data.sublist(0, math.min(10, data.length)))}]';
+    } else {
+      fileHeader = 'empty';
+    }
+    throw ImageCodecException(
+        'Failed to detect image file format using the file header.\n'
+        'File header was $fileHeader.\n'
+        'Image source: $debugSource');
+  }
+  return contentType;
+}

lib/web_ui/lib/src/engine/canvaskit/image_web_codecs.dart

@@ -11,7 +11,6 @@
 import 'dart:async';
 import 'dart:convert' show base64;
 import 'dart:js_interop';
-import 'dart:math' as math;
 import 'dart:typed_data';
 
 import 'package:ui/src/engine.dart';
@@ -27,26 +26,9 @@ class CkBrowserImageDecoder extends BrowserImageDecoder {
 
   static Future<CkBrowserImageDecoder> create({
     required Uint8List data,
+    required String contentType,
     required String debugSource,
   }) async {
-    // ImageDecoder does not detect image type automatically. It requires us to
-    // tell it what the image type is.
-    final String? contentType = detectContentType(data);
-
-    if (contentType == null) {
-      final String fileHeader;
-      if (data.isNotEmpty) {
-        fileHeader = '[${bytesToHexString(data.sublist(0, math.min(10, data.length)))}]';
-      } else {
-        fileHeader = 'empty';
-      }
-      throw ImageCodecException(
-        'Failed to detect image file format using the file header.\n'
-        'File header was $fileHeader.\n'
-        'Image source: $debugSource'
-      );
-    }
-
     final CkBrowserImageDecoder decoder = CkBrowserImageDecoder._(
       contentType: contentType,
       dataSource: data.toJS,

lib/web_ui/lib/src/engine/html_image_element_codec.dart

@@ -4,6 +4,7 @@
 
 import 'dart:async';
 
+import 'package:ui/src/engine.dart';
 import 'package:ui/ui.dart' as ui;
 import 'package:ui/ui_web/src/ui_web.dart' as ui_web;
 
@@ -24,50 +25,46 @@ final bool _supportsDecode = _jsImageDecodeFunction != null;
 typedef WebOnlyImageCodecChunkCallback = ui_web.ImageCodecChunkCallback;
 
 abstract class HtmlImageElementCodec implements ui.Codec {
-  HtmlImageElementCodec(this.src, {this.chunkCallback});
+  HtmlImageElementCodec(this.src, {this.chunkCallback, this.debugSource});
 
   final String src;
   final ui_web.ImageCodecChunkCallback? chunkCallback;
+  final String? debugSource;
 
   @override
   int get frameCount => 1;
 
   @override
   int get repetitionCount => 0;
 
-  @override
-  Future<ui.FrameInfo> getNextFrame() async {
-    final Completer<ui.FrameInfo> completer = Completer<ui.FrameInfo>();
+  /// The Image() element backing this codec.
+  DomHTMLImageElement? imgElement;
+
+  /// A Future which completes when the Image element backing this codec has
+  /// been loaded and decoded.
+  Future<void>? decodeFuture;
+
+  Future<void> decode() async {
+    if (decodeFuture != null) {
+      return decodeFuture;
+    }
+    final Completer<void> completer = Completer<void>();
+    decodeFuture = completer.future;
     // Currently there is no way to watch decode progress, so
     // we add 0/100 , 100/100 progress callbacks to enable loading progress
     // builders to create UI.
     chunkCallback?.call(0, 100);
     if (_supportsDecode) {
-      final DomHTMLImageElement imgElement = createDomHTMLImageElement();
-      imgElement.src = src;
-      setJsProperty<String>(imgElement, 'decoding', 'async');
+      imgElement = createDomHTMLImageElement();
+      imgElement!.src = src;
+      setJsProperty<String>(imgElement!, 'decoding', 'async');
 
       // Ignoring the returned future on purpose because we're communicating
       // through the `completer`.
       // ignore: unawaited_futures
-      imgElement.decode().then((dynamic _) {
+      imgElement!.decode().then((dynamic _) {
         chunkCallback?.call(100, 100);
-        int naturalWidth = imgElement.naturalWidth.toInt();
-        int naturalHeight = imgElement.naturalHeight.toInt();
-        // Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=700533.
-        if (naturalWidth == 0 &&
-            naturalHeight == 0 &&
-            ui_web.browser.browserEngine == ui_web.BrowserEngine.firefox) {
-          const int kDefaultImageSizeFallback = 300;
-          naturalWidth = kDefaultImageSizeFallback;
-          naturalHeight = kDefaultImageSizeFallback;
-        }
-        final ui.Image image = createImageFromHTMLImageElement(
-          imgElement,
-          naturalWidth,
-          naturalHeight,
-        );
-        completer.complete(SingleFrameInfo(image));
+        completer.complete();
       }).catchError((dynamic e) {
         // This code path is hit on Chrome 80.0.3987.16 when too many
         // images are on the page (~1000).
@@ -80,8 +77,31 @@ abstract class HtmlImageElementCodec implements ui.Codec {
     return completer.future;
   }
 
-  void _decodeUsingOnLoad(Completer<ui.FrameInfo> completer) {
-    final DomHTMLImageElement imgElement = createDomHTMLImageElement();
+  @override
+  Future<ui.FrameInfo> getNextFrame() async {
+    await decode();
+    int naturalWidth = imgElement!.naturalWidth.toInt();
+    int naturalHeight = imgElement!.naturalHeight.toInt();
+    // Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=700533.
+    if (naturalWidth == 0 &&
+        naturalHeight == 0 &&
+        ui_web.browser.browserEngine == ui_web.BrowserEngine.firefox) {
+      const int kDefaultImageSizeFallback = 300;
+      naturalWidth = kDefaultImageSizeFallback;
+      naturalHeight = kDefaultImageSizeFallback;
+    }
+    final ui.Image image = createImageFromHTMLImageElement(
+      imgElement!,
+      naturalWidth,
+      naturalHeight,
+    );
+    return SingleFrameInfo(image);
+  }
+
+  // TODO(harryterkelsen): All browsers support Image.decode now. Should we
+  // remove this code path?
+  void _decodeUsingOnLoad(Completer<void> completer) {
+    imgElement = createDomHTMLImageElement();
     // If the browser doesn't support asynchronous decoding of an image,
     // then use the `onload` event to decide when it's ready to paint to the
     // DOM. Unfortunately, this will cause the image to be decoded synchronously
@@ -90,27 +110,25 @@ abstract class HtmlImageElementCodec implements ui.Codec {
     DomEventListener? loadListener;
     errorListener = createDomEventListener((DomEvent event) {
       if (loadListener != null) {
-        imgElement.removeEventListener('load', loadListener);
+        imgElement!.removeEventListener('load', loadListener);
       }
-      imgElement.removeEventListener('error', errorListener);
-      completer.completeError(event);
+      imgElement!.removeEventListener('error', errorListener);
+      completer.completeError(ImageCodecException(
+        'Failed to decode image data.\n'
+        'Image source: $debugSource',
+      ));
     });
-    imgElement.addEventListener('error', errorListener);
+    imgElement!.addEventListener('error', errorListener);
     loadListener = createDomEventListener((DomEvent event) {
       if (chunkCallback != null) {
         chunkCallback!(100, 100);
       }
-      imgElement.removeEventListener('load', loadListener);
-      imgElement.removeEventListener('error', errorListener);
-      final ui.Image image = createImageFromHTMLImageElement(
-        imgElement,
-        imgElement.naturalWidth.toInt(),
-        imgElement.naturalHeight.toInt(),
-      );
-      completer.complete(SingleFrameInfo(image));
+      imgElement!.removeEventListener('load', loadListener);
+      imgElement!.removeEventListener('error', errorListener);
+      completer.complete();
     });
-    imgElement.addEventListener('load', loadListener);
-    imgElement.src = src;
+    imgElement!.addEventListener('load', loadListener);
+    imgElement!.src = src;
   }
 
   /// Creates a [ui.Image] from an [HTMLImageElement] that has been loaded.
@@ -125,7 +143,11 @@ abstract class HtmlImageElementCodec implements ui.Codec {
 }
 
 abstract class HtmlBlobCodec extends HtmlImageElementCodec {
-  HtmlBlobCodec(this.blob) : super(domWindow.URL.createObjectURL(blob));
+  HtmlBlobCodec(this.blob)
+      : super(
+          domWindow.URL.createObjectURL(blob),
+          debugSource: 'encoded image bytes',
+        );
 
   final DomBlob blob;
 

lib/web_ui/test/canvaskit/embedded_views_test.dart

@@ -597,6 +597,7 @@ void testMain() {
       await createPlatformView(0, 'test-platform-view');
 
       final CkBrowserImageDecoder image = await CkBrowserImageDecoder.create(
+        contentType: 'image/gif',
         data: kAnimatedGif,
         debugSource: 'test',
       );