[web][canvaskit] Images loaded via createImageCodecFromUrl turn black after their ui.Image is disposed (e.g. by ImageCache eviction) — regression in 3.47.0 #191800

import 'dart:async';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'dart:ui_web' as ui_web;

import 'package:flutter/material.dart';

// Panels 1 and 2 need a real URL, since createImageCodecFromUrl loads from one.
// Any reachable image works; this one is a public placeholder service.
const String kUrl = 'https://picsum.photos/seed/flutterbug/320/240';

void main() => runApp(const MaterialApp(home: Demo()));

class Demo extends StatefulWidget {
  const Demo({super.key});

  @override
  State<Demo> createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  ui.Image? _kept;
  ui.Picture? _control, _element, _pixels;
  String _status = 'loading…';

  @override
  void initState() {
    super.initState();
    _run();
  }

  /// The `<img>`-element path: what `ui_web.createImageCodecFromUrl` uses, and
  /// what `package:cached_network_image` uses in its default web mode.
  Future<ui.Image> _loadViaImageElement() async {
    final codec = await ui_web.createImageCodecFromUrl(Uri.parse(kUrl));
    return (await codec.getNextFrame()).image;
  }

  /// A control that is not backed by an `<img>` element: an image built from
  /// raw pixels. Needs no network and no assets.
  Future<ui.Image> _imageFromPixels() {
    const int w = 320, h = 240;
    final pixels = Uint8List(w * h * 4);
    for (int y = 0; y < h; y++) {
      for (int x = 0; x < w; x++) {
        final i = (y * w + x) * 4;
        pixels[i] = x * 255 ~/ w;
        pixels[i + 1] = y * 255 ~/ h;
        pixels[i + 2] = 180;
        pixels[i + 3] = 255;
      }
    }
    final completer = Completer<ui.Image>();
    ui.decodeImageFromPixels(pixels, w, h, ui.PixelFormat.rgba8888, completer.complete);
    return completer.future;
  }

  ui.Picture _record(ui.Image image) {
    final recorder = ui.PictureRecorder();
    Canvas(recorder).drawImageRect(
      image,
      Rect.fromLTWH(0, 0, image.width.toDouble(), image.height.toDouble()),
      const Rect.fromLTWH(0, 0, 240, 180),
      Paint(),
    );
    return recorder.endRecording();
  }

  Future<void> _run() async {
    // 1. <img> path, handle kept alive.
    final control = await _loadViaImageElement();
    final controlPicture = _record(control);

    // 2. <img> path, handle disposed after the picture was recorded.
    final element = await _loadViaImageElement();
    final elementPicture = _record(element);
    element.dispose();

    // 3. Not an <img>: raw pixels, disposed exactly the same way.
    final pixels = await _imageFromPixels();
    final pixelPicture = _record(pixels);
    pixels.dispose();

    if (!mounted) return;
    setState(() {
      _kept = control;
      _control = controlPicture;
      _element = elementPicture;
      _pixels = pixelPicture;
      _status = 'each panel draws a ui.Picture; panels 2 and 3 disposed their ui.Image first';
    });
  }

  @override
  void dispose() {
    _kept?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(title: Text(_status)),
    body: Center(
      child: Wrap(
        spacing: 16,
        runSpacing: 16,
        children: [
          _Panel('1. <img> · handle KEPT\n(renders)', _control),
          _Panel('2. <img> · handle DISPOSED\n(BLACK)', _element),
          _Panel('3. pixels · handle DISPOSED\n(renders)', _pixels),
        ],
      ),
    ),
  );
}

class _Panel extends StatelessWidget {
  const _Panel(this.label, this.picture);

  final String label;
  final ui.Picture? picture;

  @override
  Widget build(BuildContext context) => Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Text(label, textAlign: TextAlign.center),
      const SizedBox(height: 8),
      Container(
        width: 240,
        height: 180,
        decoration: BoxDecoration(border: Border.all()),
        child: picture == null ? null : CustomPaint(painter: _PicturePainter(picture!)),
      ),
    ],
  );
}

class _PicturePainter extends CustomPainter {
  _PicturePainter(this.picture);

  final ui.Picture picture;

  @override
  void paint(Canvas canvas, Size size) => canvas.drawPicture(picture);

  @override
  bool shouldRepaint(_PicturePainter oldDelegate) => oldDelegate.picture != picture;
}