Flutter中如何调整图片亮度并直接应用至图片文件？

问题分析 #

你当前用ColorFiltered实现的亮度预览，是通过颜色矩阵给每个RGB通道添加偏移量来调整亮度；而使用image包的adjustColor时，直接传入滑块值会因为参数转换逻辑不一致，导致最终效果和预览不匹配。

预览的亮度计算逻辑是：

• 滑块值≤0时，偏移量 = 滑块值 × 255
• 滑块值>0时，偏移量 = 滑块值 × 100

而adjustColor的brightness参数就是直接给每个RGB通道添加的偏移量，只要让这个参数和预览的偏移量一致，就能实现匹配的效果。

解决方案代码 #

1. 导入image包 #

确保你已经在pubspec.yaml中添加了image依赖，然后导入：

import 'package:image/image.dart' as img;

2. 实现图片亮度处理函数 #

Future<void> applyBrightnessToFile() async {
  // 读取原图片文件
  final imageFile = File(widget.imagePath);
  final imageBytes = await imageFile.readAsBytes();
  final originalImage = img.decodeImage(imageBytes);
  
  if (originalImage == null) {
    // 图片解码失败的处理
    return;
  }

  // 复用预览的亮度偏移量计算逻辑
  final double brightnessOffset;
  if (_sliderBrightnessValue <= 0) {
    brightnessOffset = _sliderBrightnessValue * 255;
  } else {
    brightnessOffset = _sliderBrightnessValue * 100;
  }

  // 应用亮度调整
  final adjustedImage = img.adjustColor(
    originalImage,
    brightness: brightnessOffset.toInt(), // adjustColor接受int类型的偏移量
  );

  // 保存处理后的图片（这里覆盖原文件，也可以保存为新文件）
  final outputBytes = img.encodeJpg(adjustedImage);
  await imageFile.writeAsBytes(outputBytes);

  // 处理完成后可以刷新UI或提示用户
}

3. 调用处理函数 #

比如在滑块的onChanged或者一个确认按钮的点击事件中调用：

// 示例：添加一个确认按钮
ElevatedButton(
  onPressed: applyBrightnessToFile,
  child: const Text('应用亮度调整'),
),

关键说明 #

• 核心是复用预览的亮度偏移量计算逻辑，确保adjustColor的brightness参数和ColorFilter矩阵中的偏移值完全一致，这样处理后的图片和预览效果就会匹配。
• 图片处理是耗时操作，建议放在异步函数中执行，避免阻塞UI线程。如果处理大图片，还可以考虑使用Isolate来优化性能。

内容的提问来源于stack exchange，提问作者Yoann Far