Flutter图片压缩插件flutter_image_compress的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter图片压缩插件flutter_image_compress的使用

简介

flutter_image_compress 是一个用于Flutter应用程序的图片压缩插件。它通过原生代码(Obj-C/Kotlin)实现图片压缩,以提高效率和性能。此库适用于Android、iOS、macOS、Web和OpenHarmony平台。

为什么选择使用原生代码?

  • 效率问题:Dart语言中的图像压缩在某些情况下效率不高,即使在发布版本中也是如此。
  • Isolate无解:使用Isolate并不能解决效率问题。

平台特性

特性 Android iOS Web macOS OpenHarmony
compressWithList
compressAssetImage
compressWithFile
compressAndGetFile
格式: jpeg
格式: png
格式: webp 🌐
格式: heic
参数: quality 🌐
参数: rotate
参数: keepExif

使用方法

添加依赖

pubspec.yaml文件中添加依赖:

dependencies:
  flutter_image_compress: ^latest_version

或者运行命令:

flutter pub add flutter_image_compress

导入包

在Dart代码中导入包:

import 'package:flutter_image_compress/flutter_image_compress.dart';

示例代码

以下是几种使用该库API的方法示例:

1. 压缩文件并获取Uint8List

Future<Uint8List> testCompressFile(File file) async {
  var result = await FlutterImageCompress.compressWithFile(
    file.absolute.path,
    minWidth: 2300,
    minHeight: 1500,
    quality: 94,
    rotate: 90,
  );
  print(file.lengthSync());
  print(result.length);
  return result;
}

2. 压缩文件并获取新文件

Future<File> testCompressAndGetFile(File file, String targetPath) async {
  var result = await FlutterImageCompress.compressAndGetFile(
      file.absolute.path, targetPath,
      quality: 88,
      rotate: 180,
  );

  print(file.lengthSync());
  print(result.lengthSync());

  return result;
}

3. 压缩资源图片并获取Uint8List

Future<Uint8List> testCompressAsset(String assetName) async {
  var list = await FlutterImageCompress.compressAssetImage(
    assetName,
    minHeight: 1920,
    minWidth: 1080,
    quality: 96,
    rotate: 180,
  );

  return list;
}

4. 压缩Uint8List并获取新的Uint8List

Future<Uint8List> testComporessList(Uint8List list) async {
  var result = await FlutterImageCompress.compressWithList(
    list,
    minHeight: 1920,
    minWidth: 1080,
    quality: 96,
    rotate: 135,
  );
  print(list.length);
  print(result.length);
  return result;
}

关于公共参数

  • minWidth 和 minHeight:限制图片缩放的比例。
  • rotate:旋转图片的角度。
  • autoCorrectionAngle:自动校正角度(仅限0.5.0及以上版本)。
  • quality:目标图片的质量。
  • format:支持jpeg或png,默认为jpeg。
  • inSampleSize:仅支持Android,参考Android官方文档
  • keepExif:是否保留EXIF信息,默认为false。

结果处理

返回的结果如果是List<int>,则不会为null,但可能为空数组;如果是File,则可能为null,请自行检查文件是否存在。

异常处理

由于一些平台不支持特定格式(如webp和heic),可能会抛出UnsupportedError异常,建议捕获异常并进行兼容处理。

Future<Uint8List> compressAndTryCatch(String path) async {
  Uint8List result;
  try {
    result = await FlutterImageCompress.compressWithFile(
      path,
      format: CompressFormat.heic,
    );
  } on UnsupportedError catch (e) {
    print(e);
    result = await FlutterImageCompress.compressWithFile(
      path,
      format: CompressFormat.jpeg,
    );
  }
  return result;
}

其他注意事项

  • Android:可能需要更新Kotlin版本到1.5.21或更高。
  • Web:使用pica实现压缩,部分方法在Web上不支持。
  • macOS:需要将最低部署目标设置为10.15。
  • OpenHarmony:编码输出图片格式目前仅支持JPEG、PNG和WebP。

希望这些信息能帮助你更好地理解和使用flutter_image_compress插件!如果有任何问题或需要进一步的帮助,请随时提问。


更多关于Flutter图片压缩插件flutter_image_compress的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片压缩插件flutter_image_compress的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何使用 flutter_image_compress 插件来压缩图片的示例代码。这个插件允许你在Flutter应用中高效地压缩图片,同时保持较好的图片质量。

首先,你需要在 pubspec.yaml 文件中添加依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_image_compress: ^3.1.0  # 请确保使用最新版本

然后运行 flutter pub get 来获取依赖。

接下来是一个完整的示例代码,展示如何使用 flutter_image_compress 插件来压缩图片:

import 'package:flutter/material.dart';
import 'package:flutter_image_compress/flutter_image_compress.dart';
import 'package:image_picker/image_picker.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ImageCompressDemo(),
    );
  }
}

class ImageCompressDemo extends StatefulWidget {
  @override
  _ImageCompressDemoState createState() => _ImageCompressDemoState();
}

class _ImageCompressDemoState extends State<ImageCompressDemo> {
  final ImagePicker _picker = ImagePicker();
  File? _imageFile;
  File? _compressedImageFile;

  Future<void> _pickImage() async {
    final pickedFile = await _picker.pickImage(source: ImageSource.camera);

    if (pickedFile != null) {
      setState(() {
        _imageFile = File(pickedFile.path);
      });

      _compressImage(pickedFile.path);
    }
  }

  Future<void> _compressImage(String filePath) async {
    final options = FlutterImageCompressOptions()
      ..quality = 80  // 设置压缩质量,范围0-100
      ..maxWidth = 1920  // 设置最大宽度
      ..maxHeight = 1920;  // 设置最大高度

    final result = await FlutterImageCompress.compressWithFile(filePath, options);

    if (result.success) {
      setState(() {
        _compressedImageFile = File(result.outputPath!);
      });
    } else {
      print("压缩失败: ${result.errorInfo}");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Image Compress Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _imageFile != null
                ? Image.file(_imageFile!)
                : Text('未选择图片'),
            SizedBox(height: 20),
            _compressedImageFile != null
                ? Image.file(_compressedImageFile!)
                : Text('未压缩图片'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('选择并压缩图片'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们使用了 image_picker 插件来选择图片。flutter_image_compress 插件用于压缩图片。你可以通过调整 FlutterImageCompressOptions 中的 qualitymaxWidthmaxHeight 参数来控制压缩效果。

注意:

  1. 确保你已经在 AndroidManifest.xmlInfo.plist 文件中配置了必要的权限,以允许应用访问相机和存储。
  2. flutter_image_compress 插件需要处理文件路径,所以在iOS上可能需要额外配置以支持文件访问。

这个示例提供了一个基本的框架,你可以根据自己的需求进一步扩展和优化。

回到顶部