Flutter图片压缩插件compress_images_flutter的使用

添加导入

import 'package:compress_images_flutter/compress_images_flutter.dart';

创建库实例

final CompressImagesFlutter compressImagesFlutter = CompressImagesFlutter();

使用路径调用图像并设置质量参数（如果未指定，默认为70）

File? compressedPhoto = await compressImagesFlutter
                          .compressImage(photo!.path, quality: 30);

压缩效果

完整示例代码

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

import 'dart:io';

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

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final CompressImagesFlutter compressImagesFlutter = CompressImagesFlutter();
  XFile? photo;
  double photoLengthCompressed = 0;
  double photoLengthNormal = 0;
  final ImagePicker _picker = ImagePicker();
  File? newPhoto;
  File? compressedPhoto;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: SingleChildScrollView(
            child: Column(
              children: [
                // 旋转按钮
                TextButton(
                    onPressed: () async {
                      await compressImagesFlutter.rotateImage(compressedPhoto!.path);
                      imageCache.clearLiveImages();
                      imageCache.clear();
                      setState(() {});
                    },
                    child: const Text('旋转')),

                // 拍照按钮
                TextButton(
                    onPressed: () async {
                      photo = await _picker.pickImage(source: ImageSource.camera, maxWidth: 1600);
                      newPhoto = File(photo!.path);
                      compressedPhoto = await compressImagesFlutter.compressImage(photo!.path, quality: 10);
                      photoLengthCompressed = (((compressedPhoto!.readAsBytesSync().lengthInBytes) * 1.0) / 1024) / 1024;
                      photoLengthNormal = (((newPhoto!.readAsBytesSync().lengthInBytes) * 1.0) / 1024) / 1024;
                      setState(() {});
                    },
                    child: const Text("拍照")),

                // 从图库选择图片按钮
                TextButton(
                    onPressed: () async {
                      photo = await _picker.pickImage(source: ImageSource.gallery, maxWidth: 1600);
                      newPhoto = File(photo!.path);
                      compressedPhoto = await compressImagesFlutter.compressImage(photo!.path, quality: 30);
                      photoLengthCompressed = (((compressedPhoto!.readAsBytesSync().lengthInBytes) * 1.0) / 1024) / 1024;
                      photoLengthNormal = (((newPhoto!.readAsBytesSync().lengthInBytes) * 1.0) / 1024) / 1024;
                      setState(() {});
                    },
                    child: const Text("图库照片")),

                // 显示压缩后图片大小
                Text('压缩后照片大小 ${photoLengthCompressed.toStringAsFixed(4)} MB'),

                // 显示原图大小
                Text('原图大小 ${photoLengthNormal.toStringAsFixed(4)} MB'),

                // 显示压缩后的图片
                if (compressedPhoto != null)
                  Image.file(
                    compressedPhoto!,
                    key: UniqueKey(),
                  ),

                const SizedBox(
                  height: 20.0,
                ),

                // 显示原图
                if (newPhoto != null) Image.file(newPhoto!),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

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

itying888 1楼

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

compress_images_flutter 是一个用于在 Flutter 应用中压缩图片的插件。它可以帮助你减少图片文件的大小，从而优化应用的性能和减少存储空间的使用。以下是如何使用 compress_images_flutter 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 compress_images_flutter 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  compress_images_flutter: ^1.0.0  # 请检查最新版本

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

2. 导入插件

在你的 Dart 文件中导入 compress_images_flutter 插件：

import 'package:compress_images_flutter/compress_images_flutter.dart';

3. 使用插件压缩图片

你可以使用 CompressImagesFlutter.compressImage 方法来压缩图片。以下是一个简单的示例：

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

class ImageCompressionExample extends StatefulWidget {
  [@override](/user/override)
  _ImageCompressionExampleState createState() => _ImageCompressionExampleState();
}

class _ImageCompressionExampleState extends State<ImageCompressionExample> {
  File? _image;
  File? _compressedImage;

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

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

      // 压缩图片
      final compressedFile = await CompressImagesFlutter.compressImage(
        _image!.path,
        quality: 50, // 压缩质量，范围是 0 到 100
      );

      setState(() {
        _compressedImage = compressedFile;
      });
    }
  }

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

void main() => runApp(MaterialApp(
  home: ImageCompressionExample(),
));