Flutter图像处理插件scrunch的使用

功能

• 使用 flutter_isolate 在单独的隔离区压缩图像文件。
• 可以设置图像大小，当图像超过该大小时触发压缩。

开始使用

要使用此插件，运行以下命令：

flutter pub add scrunch

或者在你的 pubspec.yaml 文件中添加以下内容：

dependencies:
    ...
    scrunch: LATEST_VERSION

使用方法

导入 scrunch.dart：

import 'package:scrunch/scrunch.dart';

快速使用示例：

final Scrunch scrunch = Scrunch();

List<File> imageFilesToCompress = [image1, image2, image3];

Future<List<File>?> runCompression(List<File?> imageFiles) async {
  try {
    // 第二个参数（5）是触发压缩的大小（单位为兆字节）
    final compressedFiles = await scrunch.compress(imageFiles, 5);
    return compressedFiles;
  } catch (e) {
    // 处理错误
  } finally {
    scrunch.dispose();
  }
} 

final compressedImageFiles = await runCompression(imageFilesToCompress);

示例代码

以下是完整的示例代码：

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:path_provider/path_provider.dart';
import 'package:scrunch/scrunch.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ScrunchExamplePage(title: 'Scrunch Example Page'),
    );
  }
}

class ScrunchExamplePage extends StatefulWidget {
  const ScrunchExamplePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<ScrunchExamplePage> createState() => _ScrunchExamplePageState();
}

class _ScrunchExamplePageState extends State<ScrunchExamplePage> {
  final Scrunch _scrunch = Scrunch();

  /// 这个变量将保存示例文件
  File? _exampleFile;

  /// 这个变量将保存压缩后的文件
  File? _compressedFile;

  /// 这个变量用于指示何时正在压缩 [_exampleFile]
  /// 并根据 `_isCompressing` 的值改变按钮文本从 "Compress Image" 到 "Compressing..."
  bool _isCompressing = false;

  /// 此方法使用 "path_provider" 包从示例资产图像创建文件
  void getImageFileFromAssets() async {
    final byteData = await rootBundle.load('assets/example_image.jpg');

    final file = File('${(await getTemporaryDirectory()).path}/example_image.jpg');
    await file.writeAsBytes(byteData.buffer.asUint8List(byteData.offsetInBytes, byteData.lengthInBytes));
    setState(() => _exampleFile = file);
  }

  [@override](/user/override)
  void initState() {
    super.initState();

    getImageFileFromAssets();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: _exampleFile == null
            ? const CircularProgressIndicator(
                strokeWidth: 2.0,
              )
            : SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      "未压缩图像",
                      style: Theme.of(context).textTheme.headline4,
                    ),
                    Image.asset("assets/example_image.jpg"),
                    _compressedFile == null
                        ? TextButton(
                            onPressed: !_isCompressing
                                ? () async {
                                    setState(() => _isCompressing = true);
                                    final result = await _scrunch
                                        .compress([_exampleFile!], 8); // 最小允许图像大小为8兆字节

                                    if (result != null) {
                                      setState(
                                        () => _compressedFile = result[0],
                                      );
                                    }
                                  }
                                : null,
                            style: ButtonStyle(
                                backgroundColor: MaterialStateProperty.all<Color>(
                                    Colors.orangeAccent)),
                            child: Text(_isCompressing ? "压缩中..." : "压缩图像"),
                          )
                        : const SizedBox.shrink(),
                    _compressedFile != null
                        ? Column(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              const SizedBox(
                                height: 24.0,
                              ),
                              Text(
                                "压缩后图像",
                                style: Theme.of(context).textTheme.headline4,
                              ),
                              Image.file(_compressedFile!),
                            ],
                          )
                        : const SizedBox.shrink(),
                  ],
                ),
              ),
      ),
    );
  }
}