flutter如何获取网络图片的宽高

在Flutter中，我想通过网络加载一张图片后获取它的宽度和高度，但不知道具体怎么实现。使用Image.network加载图片后，如何读取图片的实际尺寸？有没有直接获取网络图片宽高的方法，还是需要先下载到本地才能获取？希望提供一个简单的代码示例。

2 回复

使用Image.network构造函数加载图片，通过Image的image属性获取ImageInfo，再读取宽高。示例：

Image.network(url).image.resolve(ImageConfiguration()).addListener(
  ImageStreamListener((info, _) {
    print('宽: ${info.image.width}, 高: ${info.image.height}');
  })
);

更多关于flutter如何获取网络图片的宽高的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中获取网络图片的宽高，可以使用以下方法：

方法1：使用Image.network的加载回调

Image.network(
  'https://example.com/image.jpg',
  frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
    if (frame != null) {
      // 获取到图片尺寸
      print('图片尺寸: ${frame.width} x ${frame.height}');
    }
    return child;
  },
)

方法2：使用ImageProvider直接获取尺寸

Future<void> getImageSize(String imageUrl) async {
  try {
    final imageProvider = NetworkImage(imageUrl);
    final configuration = ImageConfiguration();
    final imageStream = imageProvider.resolve(configuration);
    
    imageStream.addListener(
      ImageStreamListener((ImageInfo info, bool synchronousCall) {
        final width = info.image.width;
        final height = info.image.height;
        print('图片尺寸: $width x $height');
      }),
    );
  } catch (e) {
    print('获取图片尺寸失败: $e');
  }
}

方法3：使用http包下载图片头信息（推荐用于大图片）

import 'package:http/http.dart' as http;

Future<void> getImageSizeFromHeader(String imageUrl) async {
  try {
    final response = await http.head(Uri.parse(imageUrl));
    final contentType = response.headers['content-type'];
    
    if (contentType?.startsWith('image/') ?? false) {
      // 注意：不是所有服务器都返回尺寸信息
      print('Content-Type: $contentType');
    }
  } catch (e) {
    print('获取图片信息失败: $e');
  }
}

完整示例

class ImageSizeGetter extends StatefulWidget {
  @override
  _ImageSizeGetterState createState() => _ImageSizeGetterState();
}

class _ImageSizeGetterState extends State<ImageSizeGetter> {
  Size? imageSize;

  void getImageSize(String url) {
    final imageProvider = NetworkImage(url);
    final configuration = ImageConfiguration();
    
    imageProvider.resolve(configuration).addListener(
      ImageStreamListener((ImageInfo info, bool _) {
        setState(() {
          imageSize = Size(
            info.image.width.toDouble(),
            info.image.height.toDouble(),
          );
        });
      }),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        if (imageSize != null)
          Text('图片尺寸: ${imageSize!.width} x ${imageSize!.height}'),
        ElevatedButton(
          onPressed: () => getImageSize('https://example.com/image.jpg'),
          child: Text('获取图片尺寸'),
        ),
      ],
    );
  }
}

推荐使用方法2，它能够准确获取图片的实际尺寸，且性能较好。方法1适合在显示图片的同时获取尺寸，方法3适合快速获取基本信息但可能无法获得准确尺寸。

回到顶部