如何在 flutter web 中将网络图像显示为 NetworkImage 之前调整其大小？

Question

我的目标是通过缩小图像来提高网站的性能。

当我显示 NetworkImages 时，它们总是渲染完整的源图像分辨率（例如 7000x4667 像素）。小部件本身大多具有较小的尺寸（例如 200x200 像素）。我有图像 url，并且希望在将 7000x4667 像素图像加载到 NetworkImage 小部件中之前将其缩放到 200x200。

我已经尝试过的是这个问题的答案： Flutter - Resize network image 这确实适用于 mobil 的 flutter，但不适用于 flutter web，因为线路在 flutter web 中ByteData originalByteData = await originalUiImage.toByteData();返回null。

已经预先非常感谢您的帮助。

Answer 1

我找到了一个可能适合您的解决方案。速度非常快，图像的尺寸也显着减小。

late Uint8List targetlUinit8List;
late Uint8List originalUnit8List;

Future<Uint8List> _resizeImage() async {
  var imageUrl = Uri.parse('https://picsum.photos/250?image=9');
  http.Response response = await http.get(imageUrl);
  originalUnit8List = response.bodyBytes;

  ui.Image originalUiImage = await decodeImageFromList(originalUnit8List);
  ByteData? originalByteData = await originalUiImage.toByteData();
  print('original image ByteData size is ${originalByteData!.lengthInBytes}');

  var codec = await ui.instantiateImageCodec(originalUnit8List,
      targetHeight: 200, targetWidth: 200);
  var frameInfo = await codec.getNextFrame();
  ui.Image targetUiImage = frameInfo.image;

  ByteData? targetByteData =
      await targetUiImage.toByteData(format: ui.ImageByteFormat.png);
  print('target image ByteData size is ${targetByteData!.lengthInBytes}');
  targetlUinit8List = targetByteData.buffer.asUint8List();

  //remove delay function
  await Future.delayed(Duration(seconds: 2));
  return targetlUinit8List;
}

然后我有一个 futureBuilder 作为我的示例，但您可以使用任何您想要的：

if (snapshot.hasData) {
              children = <Widget>[
                const Icon(
                  Icons.check_circle_outline,
                  color: Colors.green,
                  size: 60,
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 16),
                  child: Image.memory(snapshot.data!),
                )
              ];
            }

唯一需要实现的是处理未使用的变量，我不知道如何做到这一点（我不是最擅长颤振）。我想知道是否有人用已处置的变量来实现这个