Flutter图片压缩插件flutter_luban的使用

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

Flutter图片压缩插件flutter_luban的使用

flutter_luban简介

pub package

flutter_luban 是一个类似于 Luban 的图像压缩包,基于 image 库。这个库没有系统平台限制。

使用示例

下面是一个完整的Flutter Demo来演示如何使用 flutter_luban 来进行图片压缩。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_luban: ^最新版本号

然后运行 flutter pub get 更新依赖。

2. 完整示例代码

接下来是完整的示例代码,展示了如何选择图片并使用 flutter_luban 进行压缩:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_luban/flutter_luban.dart';
import 'package:image_picker/image_picker.dart';
import 'package:path_provider/path_provider.dart';

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

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

class ImageCompressPage extends StatefulWidget {
  @override
  _ImageCompressPageState createState() => _ImageCompressPageState();
}

class _ImageCompressPageState extends State<ImageCompressPage> {
  File? _imageFile;
  String? _compressedImagePath;

  final picker = ImagePicker();

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

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

    Directory tempDir = await getTemporaryDirectory();
    CompressObject compressObject = CompressObject(
      imageFile: _imageFile!,
      path: tempDir.path, // 压缩后保存的路径
      quality: 85, // 首次压缩质量,默认80
      step: 9, // 压缩质量步长,越大越快,越小越准确,默认6
      mode: CompressMode.LARGE2SMALL, // 默认AUTO
    );

    String? compressedPath = await Luban.compressImage(compressObject);
    setState(() {
      _compressedImagePath = compressedPath;
    });
  }

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

3. 运行效果

该应用允许用户从图库中选择一张图片,然后点击“Compress Image”按钮对图片进行压缩,并显示压缩后的图片。

通过这个简单的例子,你可以看到 flutter_luban 插件在Flutter项目中的使用方法。希望这对你有所帮助!

如果你有任何问题或需要进一步的帮助,请随时提问!


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

1 回复

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


当然,以下是如何在Flutter项目中使用flutter_luban插件进行图片压缩的示例代码。flutter_luban是一个基于luban算法的图片压缩库,可以在不显著降低图片质量的情况下减少图片的大小。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_luban: ^0.1.3  # 请确保使用最新版本,版本号可能有所变化

然后运行flutter pub get来安装依赖。

2. 导入包

在你的Dart文件中导入flutter_luban包:

import 'package:flutter_luban/flutter_luban.dart';

3. 选择图片并压缩

以下是一个完整的示例,展示如何选择一个图片文件,然后使用flutter_luban进行压缩:

import 'package:flutter/material.dart';
import 'package:flutter_luban/flutter_luban.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';

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

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

class ImageCompressionScreen extends StatefulWidget {
  @override
  _ImageCompressionScreenState createState() => _ImageCompressionScreenState();
}

class _ImageCompressionScreenState extends State<ImageCompressionScreen> {
  File? originalImage;
  File? compressedImage;

  final ImagePicker _picker = ImagePicker();

  Future<void> pickImage() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);

    if (image != null) {
      final File originalFile = File((await image.path)!);
      setState(() {
        originalImage = originalFile;
      });

      compressImage(originalFile);
    }
  }

  Future<void> compressImage(File originalFile) async {
    try {
      final List<File> result = await FlutterLuban.compressImage(
        files: [originalFile.path],
        quality: 60,  // 质量参数,范围0-100,默认80
      );

      if (result.isNotEmpty) {
        setState(() {
          compressedImage = result.first;
        });
      }
    } catch (e) {
      print('压缩图片失败: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('图片压缩示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            originalImage != null
                ? Image.file(originalImage!, width: 300, height: 300)
                : Text('请选择图片'),
            SizedBox(height: 20),
            compressedImage != null
                ? Image.file(compressedImage!, width: 300, height: 300)
                : Text('压缩后的图片将显示在这里'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: pickImage,
              child: Text('选择图片'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 注意事项

  • 权限管理:确保在Android和iOS上请求了存储权限。对于Android,你可能需要在AndroidManifest.xml中添加相关权限,并在运行时请求权限。对于iOS,你需要在Info.plist中添加NSPhotoLibraryUsageDescription和NSPhotoLibraryAddUsageDescription。

  • ImagePicker:上面的示例使用了image_picker插件来选择图片。如果你还没有添加这个依赖,请在pubspec.yaml中添加它,并运行flutter pub get

  • 错误处理:在实际应用中,你可能需要更详细的错误处理逻辑,比如处理用户取消选择图片的情况,或处理文件读写错误等。

希望这个示例能帮助你理解如何在Flutter项目中使用flutter_luban进行图片压缩。

回到顶部