Flutter中如何将带滤镜效果的Image.file()对象保存为图片文件

你通过Image.file的color和colorBlendMode实现的滤镜是UI渲染层的临时效果，不会修改源文件，要持久化效果需要手动完成图片合成再覆盖写入原文件，具体实现步骤如下：

前置依赖 #

首先在pubspec.yaml中引入图片处理库：

dependencies:
  flutter:
    sdk: flutter
  image: ^4.0.17 # 请使用官方最新稳定版本

实现步骤 #

• 读取源文件的字节数据，解码为可编辑的图片对象
• 对图片对象应用和UI层完全一致的混合规则：50%透明度的目标色 + hardLight混合模式
• 把处理后的图片编码为对应格式（JPG/PNG）
• 把编码后的字节写入原文件路径

完整示例代码 #

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

Future<void> saveFilterToFile(File imageFile, Color filterColor) async {
  // 1. 读取并解码源图片
  final rawBytes = await imageFile.readAsBytes();
  final originImage = img.decodeImage(rawBytes);
  if (originImage == null) return;

  // 2. 应用和UI层一致的滤镜效果
  final processedImage = img.compositeColor(
    originImage,
    filterColor.red,
    filterColor.green,
    filterColor.blue,
    opacity: filterColor.opacity * 0.5, // 对应你配置的withOpacity(0.5)
    blendMode: img.BlendMode.hardLight, // 对应BlendMode.hardLight
  );

  // 3. 编码后写入原文件
  final outputBytes = img.encodeJpg(processedImage, quality: 90); // 带透明通道的图片可切换为encodePng
  await imageFile.writeAsBytes(outputBytes);
}

注意事项 #

• 处理分辨率超过2k的大图时，建议将逻辑移到Isolate中执行，避免阻塞UI线程导致卡顿
• 写入文件前可先对原文件做备份，避免处理异常导致原始图片丢失
• image库的混合逻辑和Flutter Skia渲染的混合逻辑对齐，处理后效果和UI展示效果基本一致

内容的提问来源于stack exchange，提问作者LOVKUSH SINGH