Flutter图片尺寸获取插件image_size_getter_http_input的使用

Flutter图片尺寸获取插件image_size_getter_http_input的使用

简介

image_size_getter_http_input 是 image_size_getter 插件的一个扩展，用于通过 HTTP 请求从远程服务器获取图片的尺寸信息。通常情况下，建议使用应用服务器或图片服务器提供的 API 来获取图片尺寸，但如果服务器不支持或无法提供这些信息，可以使用此方法。

注意事项

1. 优先使用服务器 API：如果可能，尽量使用应用服务器或图片服务器提供的 API 来获取图片尺寸，而不是直接通过 HTTP 请求。
2. 服务器要求：
   • 服务器需要支持 Range 请求头，并且提供 Content-Length 响应头。
   • 对于较大的图片文件（例如大于 5MB 或 10MB），由于范围请求可能会导致多次与服务器交互，因此获取图片尺寸的时间可能会较长。

示例代码

以下是一个完整的示例，展示了如何使用 image_size_getter_http_input 插件来获取远程图片的尺寸。

import 'package:flutter/material.dart';
import 'package:image_size_getter/image_size_getter.dart';
import 'package:image_size_getter_http_input/image_size_getter_http_input.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('图片尺寸获取示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              // 定义图片的URL
              final testUrl = 'https://cdn.jsdelivr.net/gh/CaiJingLong/some_asset@master/flutter_photo2.png';
              
              try {
                // 创建HttpInput对象
                final httpInput = await HttpInput.createHttpInput(testUrl);
                
                // 获取图片尺寸
                final size = await ImageSizeGetter.getSizeAsync(httpInput);
                
                // 打印图片尺寸
                print('图片尺寸: $size');
                
                // 在UI中显示图片尺寸
                showDialog(
                  context: context,
                  builder: (context) => AlertDialog(
                    title: Text('图片尺寸'),
                    content: Text('宽度: ${size.width}, 高度: ${size.height}'),
                    actions: [
                      TextButton(
                        onPressed: () => Navigator.pop(context),
                        child: Text('关闭'),
                      ),
                    ],
                  ),
                );
              } catch (e) {
                print('获取图片尺寸失败: $e');
                showDialog(
                  context: context,
                  builder: (context) => AlertDialog(
                    title: Text('错误'),
                    content: Text('获取图片尺寸失败: $e'),
                    actions: [
                      TextButton(
                        onPressed: () => Navigator.pop(context),
                        child: Text('关闭'),
                      ),
                    ],
                  ),
                );
              }
            },
            child: Text('获取图片尺寸'),
          ),
        ),
      ),
    );
  }
}

解释

• HttpInput.createHttpInput(testUrl)：创建一个 HttpInput 对象，用于从指定的 URL 获取图片数据。
• ImageSizeGetter.getSizeAsync(httpInput)：异步获取图片的尺寸信息。
• showDialog：在获取到图片尺寸后，弹出一个对话框显示图片的宽度和高度。

处理非Web环境中的问题

如果你在非Web环境中使用此插件，并且服务器不支持范围加载（Range Load），担心占用过多内存，可以通过设置 httpCachePath 参数来使用文件缓存。如果不设置，插件将使用内存缓存。缓存文件在获取图片尺寸完成后会自动删除。

final httpInput = await HttpInput.createHttpInput(
  testUrl,
  httpCachePath: '/path/to/cache', // 设置缓存路径
);