[skwasm] Use displayWidth/displayHeight instead of codedWidth/codedHeight (#56686)

This addresses flutter/flutter#159088

If the image is rotated in its exif data, the coded width/height may differ from the display width/height. It's important to use the display width/height so that `texImage2D` does the right thing with the `VideoFrame`.

Author: eyebrowsoffire

lib/web_ui/lib/src/engine/skwasm/skwasm_impl/codecs.dart

@@ -17,8 +17,8 @@ class SkwasmImageDecoder extends BrowserImageDecoder {
 
   @override
   ui.Image generateImageFromVideoFrame(VideoFrame frame) {
-    final int width = frame.codedWidth.toInt();
-    final int height = frame.codedHeight.toInt();
+    final int width = frame.displayWidth.toInt();
+    final int height = frame.displayHeight.toInt();
     final SkwasmSurface surface = (renderer as SkwasmRenderer).surface;
     return SkwasmImage(imageCreateFromTextureSource(
       frame as JSObject,

lib/web_ui/test/ui/image_golden_test.dart

@@ -385,6 +385,19 @@ Future<void> testMain() async {
     return info.image;
   });
 
+  test('decode rotated jpeg', () async {
+    // This image (from skia's test images) has a rotated orientation in its exif data.
+    // This should result in a 3024x4032 image, not 4032x3024 image.
+    final ui.Codec codec = await renderer.instantiateImageCodecFromUrl(
+      Uri(path: '/test_images/iphone_15.jpeg')
+    );
+    expect(codec.frameCount, 1);
+
+    final ui.FrameInfo info = await codec.getNextFrame();
+    expect(info.image.width, 3024);
+    expect(info.image.height, 4032);
+  });
+
   // This API doesn't work in headless Firefox due to requiring WebGL
   // See https://github.com/flutter/flutter/issues/109265
   if (!isFirefox) {