Flutter图片压缩插件browser_image_compression的使用

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

Flutter图片压缩插件 browser_image_compression 的使用

browser_image_compression 是一个用于在Flutter Web平台上压缩图片的插件。它利用JavaScript库 browser-image-compression 来实现图片压缩功能，提供了诸如并发压缩、进度更新和图片尺寸调整等功能。

主要特点

  • 压缩过程在Web Worker中并行运行，不影响Flutter应用的主进程。
  • 提供压缩进度更新。
  • 支持调整图片尺寸。
  • 可以限制压缩后文件的最大大小（以MB为单位），设置越低压缩时间越长。

安装步骤

  1. 在你的Flutter项目中添加依赖：

    dependencies:
  browser_image_compression: ^latest_version

    请确保将 ^latest_version 替换为最新版本号。

  2. 在项目的 web/index.html 文件的 <head> 标签内添加以下脚本引用：

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/browser-image-compression@2.0.2/dist/browser-image-compression.js"></script>

  3. 在Dart代码中导入该插件：

    import 'package:browser_image_compression/browser_image_compression.dart';

  4. 使用提供的示例代码进行图片压缩操作。

示例代码

下面是一个完整的示例，展示了如何从相册中选择图片并进行压缩：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:browser_image_compression/browser_image_compression.dart';
import 'package:image_picker/image_picker.dart';
import 'package:mime/mime.dart';
import 'package:path/path.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _imageNotifier = ValueNotifier<Uint8List?>(null);
  String comparisonSize = "";

  onButtonPressed() async {
    final XFile? xfile = await ImagePicker().pickImage(source: ImageSource.gallery);

    if (xfile != null) {
      final initialSize = await xfile.length();

      _imageNotifier.value = await BrowserImageCompression.compressImage(
        basename(xfile.path), // or xfile.name
        await xfile.readAsBytes(),
        lookupMimeType(xfile.name).toString(),
        Options(
          maxSizeMB: 1,
          maxWidthOrHeight: 2048,
          useWebWorker: true,
        ),
      );

      if (_imageNotifier.value != null) {
        final finalSize = (_imageNotifier.value!).length;
        var f = NumberFormat("####.0#", "en_US");
        comparisonSize =
            '初始大小是 $initialSize 字节，最终大小是 $finalSize 字节。压缩比为 ${f.format(initialSize / finalSize)}倍';
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('图片压缩示例'),
        ),
        body: Center(
          child: Column(
            children: [
              ElevatedButton(
                onPressed: onButtonPressed,
                child: const Text('选择图片'),
              ),
              ValueListenableBuilder<Uint8List?>(
                  valueListenable: _imageNotifier,
                  builder: (context, value, child) {
                    if (value != null) {
                      return Column(
                        children: [
                          Text(comparisonSize),
                          Image.memory(value),
                        ],
                      );
                    } else {
                      return Container();
                    }
                  }),
            ],
          ),
        ),
      ),
    );
  }
}

这个示例展示了如何从相册中选取一张图片，并通过 browser_image_compression 插件对其进行压缩处理。压缩后的图片会显示在屏幕上，并且会显示原始大小与压缩后的大小对比信息。


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter项目中使用browser_image_compression插件进行图片压缩的示例代码。请注意，browser_image_compression这个插件名称听起来更像是为Web平台设计的，但在Flutter社区中，更常见的图片压缩插件可能是image_picker结合flutter_image_compress。不过，为了符合你的要求，这里假设存在一个名为browser_image_compression的插件，并且它提供了类似的功能。

首先，确保你已经在pubspec.yaml文件中添加了该插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  browser_image_compression: ^x.y.z  # 替换为实际版本号

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

接下来，是一个使用browser_image_compression插件进行图片压缩的示例代码：

import 'package:flutter/material.dart';
import 'package:browser_image_compression/browser_image_compression.dart'; // 假设插件导入路径正确

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? _imageFile;
  File? _compressedImageFile;

  Future<void> _pickImage() async {
    // 这里假设插件提供了一个方法来选择图片
    // 实际情况可能需要根据插件的API进行调整
    var result = await BrowserImageCompression.pickImage();
    if (result != null) {
      setState(() {
        _imageFile = File(result.path);
        _compressImage(result.path);
      });
    }
  }

  Future<void> _compressImage(String imagePath) async {
    try {
      var compressedFile = await BrowserImageCompression.compressImage(
        imagePath,
        quality: 80, // 设置压缩质量，范围通常是0-100
        maxWidth: 1920, // 可选：设置最大宽度
        maxHeight: 1920, // 可选：设置最大高度
      );
      setState(() {
        _compressedImageFile = compressedFile;
      });
    } 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.start,
          children: [
            TextButton(
              onPressed: _pickImage,
              child: Text('选择图片'),
            ),
            SizedBox(height: 16),
            if (_imageFile != null)
              Image.file(_imageFile!),
            SizedBox(height: 16),
            if (_compressedImageFile != null)
              Text('压缩后的图片大小: ${_compressedImageFile!.lengthSync()} bytes'),
            SizedBox(height: 16),
            if (_compressedImageFile != null)
              Image.file(_compressedImageFile!),
          ],
        ),
      ),
    );
  }
}

注意：

  1. 上述代码中的BrowserImageCompression.pickImage()和BrowserImageCompression.compressImage()是假设的方法名。实际使用时，你需要参考browser_image_compression插件的官方文档来调用正确的方法。
  2. 由于browser_image_compression听起来像是为Web设计的，如果你在移动平台上开发，可能需要寻找其他更合适的图片压缩插件，如flutter_image_compress。
  3. 如果插件不支持直接选择图片，你可能需要结合image_picker插件来实现图片选择功能。

确保查阅插件的官方文档以获取最准确和最新的使用方法。

回到顶部