Flutter图片压缩插件bemeli_compress的使用

Flutter 图片压缩插件 bemeli_compress 的使用

安装

要将 bemeli_compress 添加为您的 Flutter 项目的依赖项，请按照以下步骤操作：

1. 在命令行中运行：

   flutter pub add bemeli_compress
   

2. 或者手动在 pubspec.yaml 文件中添加依赖项：

   dependencies:
     bemeli_compress: ^2.4.0
   

然后，在您的 Dart 代码中导入该包：

import 'package:bemeli_compress/bemeli_compress.dart';

使用

以下是一个完整的示例，展示了如何使用 bemeli_compress 插件来压缩图片。

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:bemeli_compress/bemeli_compress.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Image Compressor',
      home: ImageCompressorPage(),
    );
  }
}

class ImageCompressorPage extends StatefulWidget {
  @override
  _ImageCompressorPageState createState() => _ImageCompressorPageState();
}

class _ImageCompressorPageState extends State<ImageCompressorPage> {
  final ImagePicker _picker = ImagePicker();
  File? _image;

  Future<void> _pickImage() async {
    final XFile? pickedFile = await _picker.pickImage(source: ImageSource.gallery);
    if (pickedFile != null) {
      setState(() {
        _image = File(pickedFile.path);
      });
    }
  }

  Future<void> _compressImage() async {
    if (_image == null) return;

    final compressedImage = await BemeliCompress.compressFile(
      _image!,
      quality: 80, // 质量范围 0-100
    );

    if (compressedImage != null) {
      setState(() {
        _image = compressedImage;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Compressor'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _image != null
                ? Image.file(_image!)
                : Text('No image selected.'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('Pick Image'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _compressImage,
              child: Text('Compress Image'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们首先使用 ImagePicker 从相册中选择一张图片。然后，我们调用 BemeliCompress.compressFile 方法来压缩选中的图片。compressFile 方法接受一个 File 对象，并返回一个压缩后的 File 对象。

代码解释

1. 导入必要的库

   import 'dart:io';
   import 'package:flutter/material.dart';
   import 'package:bemeli_compress/bemeli_compress.dart';
   

2. 定义主应用

   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Image Compressor',
         home: ImageCompressorPage(),
       );
     }
   }
   

3. 定义页面状态

   class _ImageCompressorPageState extends State<ImageCompressorPage> {
     final ImagePicker _picker = ImagePicker();
     File? _image;
   
     Future<void> _pickImage() async {
       final XFile? pickedFile = await _picker.pickImage(source: ImageSource.gallery);
       if (pickedFile != null) {
         setState(() {
           _image = File(pickedFile.path);
         });
       }
     }
   
     Future<void> _compressImage() async {
       if (_image == null) return;
   
       final compressedImage = await BemeliCompress.compressFile(
         _image!,
         quality: 80, // 质量范围 0-100
       );
   
       if (compressedImage != null) {
         setState(() {
           _image = compressedImage;
         });
       }
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Image Compressor'),
         ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
               _image != null
                   ? Image.file(_image!)
                   : Text('No image selected.'),
               SizedBox(height: 20),
               ElevatedButton(
                 onPressed: _pickImage,
                 child: Text('Pick Image'),
               ),
               SizedBox(height: 20),
               ElevatedButton(
                 onPressed: _compressImage,
                 child: Text('Compress Image'),
               ),
             ],
           ),
         ),
       );
     }
   }