Flutter Android平台应用LUT滤镜出现像素化问题求助

一、自定义脚本的关键修复点 #

你的自定义LUT实现存在几个核心问题，调整后即可正常工作：

1. LUT索引顺序错误 #

多数标准Hald LUT的颜色通道排列以R→G→B作为索引维度（R为最内层维度），你当前的索引计算是B→G→R，会导致颜色映射完全错乱。修改索引计算逻辑：

// 原错误代码
final int lutIndex = (b ~/ (256 / dimension)) * dimension * dimension +
    (g ~/ (256 / dimension)) * dimension +
    (r ~/ (256 / dimension));

// 修正后
final int step = 256 ~/ dimension;
final int rIndex = r ~/ step;
final int gIndex = g ~/ step;
final int bIndex = b ~/ step;
// 按R→G→B顺序计算索引（匹配标准Hald LUT结构）
final int lutIndex = bIndex * dimension * dimension + gIndex * dimension + rIndex;

2. 强度混合逻辑优化 #

简化强度混合计算，同时避免不必要的类型转换，提升性能：

// 原代码
resultData[i] = ((r * (1.0 - intensity)) + (lutR * intensity)).toInt().clamp(0, 255);

// 优化后（整数运算更高效）
final double blendFactor = intensity.clamp(0.0, 1.0);
resultData[i] = (r * (1 - blendFactor) + lutR * blendFactor).round().clamp(0, 255);

3. 图片转换流程简化 #

将结果转为ui.Image时，直接使用decodeImageFromList更简洁，无需通过Codec：

// 原代码
final ui.ImmutableBuffer buffer = await ui.ImmutableBuffer.fromUint8List(resultData);
final ui.ImageDescriptor descriptor =
    ui.ImageDescriptor.raw(buffer, width: newWidth, height: newHeight, pixelFormat: ui.PixelFormat.rgba8888);
final ui.Codec codec = await descriptor.instantiateCodec();
final ui.FrameInfo frameInfo = await codec.getNextFrame();
return frameInfo.image;

// 优化后
final Completer<ui.Image> completer = Completer();
ui.decodeImageFromList(resultData, (ui.Image img) {
  completer.complete(img);
});
return completer.future;

二、flutter_image_filters库的正确实现 #

相比自定义CPU计算，该库提供GPU加速的LUT滤镜，效率更高，实现步骤如下：

1. 添加依赖到pubspec.yaml：

dependencies:
  flutter_image_filters: ^0.1.1 # 使用最新版本

2. 实现GPU加速的LUT滤镜：

import 'dart:ui' as ui;
import 'package:flutter_image_filters/flutter_image_filters.dart';
import 'package:flutter/services.dart';

Future<ui.Image> applyLutWithFilter(ui.Image sourceImage, String lutAssetPath) async {
  // 加载LUT图片资源
  final ByteData lutData = await rootBundle.load(lutAssetPath);
  final ui.Image lutImage = await ui.decodeImageFromList(lutData.buffer.asUint8List());

  // 配置LUT滤镜
  final configuration = LutFilterConfiguration();
  await configuration.setLutImage(lutImage);
  // 设置滤镜强度（范围0-1）
  configuration.setIntensity(0.8);

  // 应用滤镜并返回结果
  final filteredImage = await configuration.apply(sourceImage);
  return filteredImage;
}

三、额外注意事项 #

• 确保Hald LUT图片尺寸匹配维度：64x64的LUT对应维度为4（4³=64），256x256对应维度为16（16³=4096），你的代码硬编码了dimension=64，若使用其他维度的LUT会导致索引越界。
• 自定义实现仅适合小图或低性能要求场景，大图推荐使用flutter_image_filters的GPU加速方案。

内容的提问来源于stack exchange，提问作者Mauro Beltrame