跳到主要内容

UI组件库

· 阅读需 6 分钟
Quany
Quany
软件工程师

通过 flutter_rust_bridge 集成 Rust 图像处理库，并实现生成小于指定大小的 JPEG 图片，是一项能充分发挥 Rust 高性能优势的技术方案。其核心思路是，在 Rust 端编写一个图像处理函数，该函数接收图片数据和目标大小参数，通过动态调整 JPEG 的压缩质量，使输出的图片大小逼近目标值。

下面的流程图直观展示了实现这一需求的核心步骤与关键的循环调整逻辑：

下面我们具体看看如何实现。

🔧 Rust 端实现核心逻辑​

首先，在你的 Rust 项目的 Cargo.toml 文件中添加必要的依赖。

[dependencies]
image = "0.25"  # 用于图像编解码和基础处理
flutter_rust_bridge = "1.0"  # 用于桥接

接下来，实现核心的 Rust 函数。这个函数的核心在于循环调整质量参数并检查输出大小（即流程图中的循环过程）。

// 在 lib.rs 中
use image::{load_from_memory, ImageOutputFormat};
use std::io::Cursor;

/// 将图片字节数据转换为符合指定大小要求的JPEG字节数据
/// 参数:
/// - `image_bytes`: 输入的图片（如PNG）字节数据
/// - `target_size_bytes`: 目标文件大小（单位：字节）
/// 返回: 成功时返回包含JPEG数据的 `Vec<u8>`
pub fn convert_to_jpeg_with_target_size(
    image_bytes: Vec<u8>,
    target_size_bytes: u32,
) -> Result<Vec<u8>, String> { // 使用Result便于错误处理
    // 解码图片
    let img = load_from_memory(&image_bytes)
        .map_err(|e| format!("Failed to decode image: {}", e))?;

    // 初始化质量参数
    let mut quality: u8 = 80; // 初始质量参数
    let mut min_quality: u8 = 10;
    let mut max_quality: u8 = 95;
    let tolerance = (target_size_bytes as f32 * 0.05) as usize; // 允许5%的误差

    // 循环调整质量以逼近目标大小
    loop {
        // 编码为JPEG
        let mut jpeg_data: Vec<u8> = Vec::new();
        {
            let mut cursor = Cursor::new(&mut jpeg_data);
            img.write_to(&mut cursor, ImageOutputFormat::Jpeg(quality))
                .map_err(|e| format!("Failed to encode JPEG: {}", e))?;
        }

        let current_size = jpeg_data.len();

        // 检查是否在容差范围内
        if current_size <= target_size_bytes as usize {
            return Ok(jpeg_data);
        }

        // 调整质量参数
        if quality <= min_quality {
            // 如果质量已降至最低仍太大，则强制返回并提示
            return Ok(jpeg_data); // 或者可以考虑返回错误，提示无法压缩到指定大小
        }

        // 质量调整步进，可以根据当前大小与目标的差距动态调整
        let size_ratio = current_size as f32 / target_size_bytes as f32;
        let quality_step = if size_ratio > 2.0 { 15 } else if size_ratio > 1.5 { 10 } else { 5 };

        quality = quality.saturating_sub(quality_step).max(min_quality);
    }
}

代码关键点解析：

  • 动态质量调整：代码通过一个循环，根据当前输出大小与目标大小的差异，智能地调整JPEG的压缩质量（quality 参数），逐步逼近目标文件大小。这对应了流程图中的核心循环。
  • 容差范围：引入了 tolerance（容差）概念，并设定了循环终止条件，避免无休止的循环。
  • 错误处理：使用 Result 类型将潜在的错误（如解码失败、编码失败）安全地传递到Flutter端。
  • 内存操作：整个过程在内存中完成，无需读写临时文件，效率更高。

🔌 生成桥接代码并在 Flutter 端调用​

  1. 生成Dart绑定 在项目根目录下运行 flutter_rust_bridge_codegen 命令，生成对应的Dart桥接代码。

    flutter_rust_bridge_codegen --rust-input path/to/your/rust/src/lib.rs --dart-output path/to/your/flutter/lib/rust_bridge.g.dart

  2. Flutter端调用 在Flutter的Dart代码中，你可以这样调用我们刚刚实现的Rust函数。这里假设你已经正确初始化了 flutter_rust_bridge。

    import 'dart:io';
    import 'dart:typed_data';
    import 'package:file_picker/file_picker.dart';
    // 导入生成的桥接文件
    import './rust_bridge.g.dart';

    class ImageProcessor {
      final NativeImpl _nativeApi; // 桥接类的实例

      ImageProcessor(this._nativeApi);

      Future<File?> convertImageToTargetSize(File inputImage, int targetSizeKB) async {
        try {
          // 1. 读取原始图片为字节列表
          Uint8List imageBytes = await inputImage.readAsBytes();
          
          // 2. 指定目标大小（转换为字节）
          int targetSizeBytes = targetSizeKB * 1024;

          // 3. 调用Rust函数进行处理
          Uint8List jpegBytes = await _nativeApi.convertToJpegWithTargetSize(
            imageBytes: imageBytes,
            targetSizeBytes: targetSizeBytes,
          );

          // 4. 保存结果
          String outputPath = '${inputImage.parent.path}/converted_${DateTime.now().millisecondsSinceEpoch}.jpg';
          File jpegFile = File(outputPath);
          await jpegFile.writeAsBytes(jpegBytes);

          print('转换成功！输出文件: $outputPath, 大小: ${jpegBytes.length ~/ 1024}KB');
          return jpegFile;
        } catch (e) {
          print('图片转换过程中发生错误: $e');
          return null;
        }
      }
    }

    // 在Widget中的使用示例
    Future<void> _onConvertPressed() async {
      FilePickerResult? result = await FilePicker.platform.pickFiles(type: FileType.image);
      if (result != null) {
        File? inputFile = File(result.files.first.path!);
        // 假设 targetSize 来自用户输入，例如50表示50KB
        int targetSize = 50; 
        File? outputFile = await ImageProcessor(yourNativeApiInstance).convertImageToTargetSize(inputFile, targetSize);
        if (outputFile != null) {
          // 更新UI，显示转换成功的图片
        }
      }
    }

💡 进阶优化与注意事项​

为了获得更好的效果和体验，你还可以考虑以下几点：

  • 性能与用户体验：

    • 异步操作：确保Rust端的函数是异步的（例如使用 async），避免在调整质量参数的循环计算时阻塞Flutter的UI线程。
    • 防抖处理：如果此功能由用户界面上的控件（如滑块）频繁触发，建议增加防抖逻辑，避免不必要的计算。
    • 加载状态：对于处理大图片，可以考虑在界面上展示loading状态告知用户。

  • 算法调优：

    • 可以设置最大迭代次数，防止在极端情况下无限循环。
    • 根据初始文件大小和目标大小的比例，可以智能设置初始质量猜测值，加快收敛速度。
    • 如果对转换速度要求极高而对大小精度要求一般，可以适当增大容差（tolerance）。

  • 平台特定配置：要使应用在Android、iOS等平台正常运行，需要正确配置各平台的构建脚本（如Android的NDK配置），确保Flutter能正确链接编译好的Rust库。

微信公众号​

微信公众号