Flutter摄影滤镜开发：如何实现符合需求的自定义锐化效果？

Hey there! I totally get your frustration with implementing a proper sharpen filter in Flutter—those matrix limitations on ColorFiltered and ImageFilter.matrix can be a real roadblock, and it’s a bummer the PhotoFilters package didn’t cut it. Let’s walk through two solid approaches that’ll give you full control over the sharpen effect you want:

方案1：使用image包进行CPU端像素级卷积（简单易实现） #

这个方法直接操作图片像素，能完美应用3x3锐化卷积核，适合静态图片处理或者对性能要求不极致的场景。

步骤： #

1. 在pubspec.yaml中添加依赖：

   dependencies:
     image: ^4.0.17
   

2. 实现锐化卷积逻辑并集成到Widget：

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

// 应用3x3锐化卷积核
Future<img.Image> applySharpenFilter(img.Image image) async {
  // 可调整卷积核权重来控制锐化强度，以下是标准锐化核
  final sharpenKernel = [
    0.0, -1.0, 0.0,
    -1.0, 5.0, -1.0,
    0.0, -1.0, 0.0,
  ];

  // 使用image包的卷积方法处理图片
  return img.convolve(image, sharpenKernel, divisor: 1, offset: 0);
}

// 封装成可复用的Widget
class SharpenedImage extends StatefulWidget {
  final String assetPath;

  const SharpenedImage({super.key, required this.assetPath});

  @override
  State<SharpenedImage> createState() => _SharpenedImageState();
}

class _SharpenedImageState extends State<SharpenedImage> {
  img.Image? _processedImage;

  @override
  void initState() {
    super.initState();
    _processImage();
  }

  Future<void> _processImage() async {
    // 加载本地资源图片
    final assetBytes = await DefaultAssetBundle.of(context).load(widget.assetPath);
    final originalImage = img.decodeImage(assetBytes.buffer.asUint8List())!;
    
    // 应用锐化滤镜
    final sharpenedImage = await applySharpenFilter(originalImage);
    
    setState(() {
      _processedImage = sharpenedImage;
    });
  }

  @override
  Widget build(BuildContext context) {
    if (_processedImage == null) {
      return const Center(child: CircularProgressIndicator());
    }
    
    // 将处理后的图片编码为PNG并显示
    return Image.memory(img.encodePng(_processedImage!));
  }
}

方案2：自定义GLSL着色器实现GPU加速（适合实时预览/大图） #

如果需要实时预览锐化效果或者处理大图，GPU加速的着色器方法性能更好，能充分利用Flutter的图形渲染能力。

步骤： #

1. 在assets目录下创建锐化着色器文件sharpen.frag：

uniform sampler2D u_texture;
uniform vec2 u_textureSize;

void main() {
  vec2 texCoord = gl_FragCoord.xy / u_textureSize;
  vec4 finalColor = vec4(0.0);
  
  // 3x3锐化卷积核，可调整权重改变锐化强度
  mat3 sharpenKernel = mat3(
    0.0, -1.0, 0.0,
    -1.0, 5.0, -1.0,
    0.0, -1.0, 0.0
  );
  
  float divisor = 1.0;

  // 遍历卷积核计算每个像素的颜色
  for (int x = -1; x <= 1; x++) {
    for (int y = -1; y <= 1; y++) {
      vec2 pixelOffset = vec2(x, y) / u_textureSize;
      finalColor += texture2D(u_texture, texCoord + pixelOffset) * sharpenKernel[x+1][y+1];
    }
  }

  gl_FragColor = finalColor / divisor;
}

2. 在Flutter中加载着色器并渲染：

import 'package:flutter/material.dart';

class SharpenShaderPreview extends StatefulWidget {
  final ImageProvider imageProvider;

  const SharpenShaderPreview({super.key, required this.imageProvider});

  @override
  State<SharpenShaderPreview> createState() => _SharpenShaderPreviewState();
}

class _SharpenShaderPreviewState extends State<SharpenShaderPreview> {
  FragmentShader? _sharpenShader;
  ImageInfo? _imageInfo;

  @override
  void initState() {
    super.initState();
    _loadShader();
    _loadImage();
  }

  Future<void> _loadShader() async {
    // 从assets加载自定义着色器
    final shader = await FragmentShader.fromAsset('assets/sharpen.frag');
    setState(() {
      _sharpenShader = shader;
      _updateShaderParams();
    });
  }

  void _loadImage() {
    // 监听图片加载状态
    widget.imageProvider.resolve(const ImageConfiguration())
        .addListener(ImageStreamListener((info, _) {
      setState(() {
        _imageInfo = info;
        _updateShaderParams();
      });
    }));
  }

  void _updateShaderParams() {
    if (_sharpenShader == null || _imageInfo == null) return;
    // 向着色器传递图片尺寸参数
    final imageSize = Size(
      _imageInfo!.image.width.toDouble(),
      _imageInfo!.image.height.toDouble(),
    );
    _sharpenShader!
      ..setFloat(0, imageSize.width)
      ..setFloat(1, imageSize.height);
  }

  @override
  void dispose() {
    _sharpenShader?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (_sharpenShader == null || _imageInfo == null) {
      return const Center(child: CircularProgressIndicator());
    }

    return ShaderMask(
      shaderCallback: (bounds) {
        _updateShaderParams();
        return _sharpenShader!;
      },
      child: Image(image: widget.imageProvider),
      blendMode: BlendMode.srcIn, // 确保着色器效果正确叠加
    );
  }
}

小提示： #

• 调整卷积核的权重可以改变锐化强度，比如想要更强的锐化效果，可以使用这个核：

  [-1.0, -1.0, -1.0],
  [-1.0,  9.0, -1.0],
  [-1.0, -1.0, -1.0]
  

• 方案1适合离线处理，方案2适合实时交互场景（比如滑动滑块调整锐化强度时，着色器能快速响应）。

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