Flutter图像模糊处理插件 stack_blur 的使用

stack_blur 是一个用于 Dart 的库，它使用 Stack 模糊算法来模糊图像。Stack 模糊算法结合了高斯模糊和箱式模糊的优点，既快速又美观。

使用 stack_blur 库进行图像模糊处理

使用 image 库处理图像

下面是一个使用 image 库加载、模糊并保存图像的示例：

import 'dart:io';
import 'package:image/image.dart';  // 第三方库
import 'package:stack_blur/stack_blur.dart';

void main() {
  // 从文件加载图像
  final image = decodeImage(File('source.png').readAsBytesSync())!;
  Uint32List rgbaPixels = image.data;

  // 对图像像素应用模糊效果，模糊半径为42
  stackBlurRgba(rgbaPixels, image.width, image.height, 42);

  // 将模糊后的图像保存到文件
  File('blurred.png').writeAsBytesSync(encodePng(image));
}

在 Flutter 中使用 bitmap 库处理图像

在 Flutter 中，你可以通过 ImageStreamListener 获取 RGBA 像素缓冲区，并使用 stack_blur 进行模糊处理。这里是一个完整的示例：

import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:bitmap/bitmap.dart';  // 第三方库
import 'package:stack_blur/stack_blur.dart';

Future<Image> blurAsset(String assetName) async {
  ImageProvider provider = ExactAssetImage(assetName);

  // 获取RGBA像素的过程
  final ImageStream stream = provider.resolve(ImageConfiguration.empty);
  final completer = Completer<ui.Image>();
  late ImageStreamListener listener;
  listener = ImageStreamListener(
    (frame, _) {
      stream.removeListener(listener);
      completer.complete(frame.image);
    },
    onError: (error, stack) {
      stream.removeListener(listener);
      completer.completeError(error, stack);
    });
  stream.addListener(listener);
  ui.Image image = await completer.future;
  ByteData rgbaData = (await image.toByteData(format: ui.ImageByteFormat.rawRgba))!;

  // 获取所需的像素
  Uint32List rgbaPixels = rgbaData.buffer.asUint32List();

  // 应用模糊效果
  stackBlurRgba(rgbaPixels, image.width, image.height, 42);

  // 使用 'bitmap' 库将缓冲区转换为小部件
  final bitmap = Bitmap.fromHeadless(
      image.width, image.height,
      rgbaPixels.buffer.asUint8List());
  return Image.memory(bitmap.buildHeaded());
}

完整的 Flutter 示例 Demo

以下是一个完整的 Flutter 示例，展示了如何使用 stack_blur 插件对图片进行模糊处理，并在应用中显示：

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:bitmap/bitmap.dart';
import 'package:stack_blur/stack_blur.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Stack Blur Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Stack Blur Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late Future<Image> _futureImage;

  @override
  void initState() {
    super.initState();
    _futureImage = blurAsset('assets/sample.png');
  }

  Future<Image> blurAsset(String assetName) async {
    ByteData data = await rootBundle.load(assetName);
    final codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
    final frame = await codec.getNextFrame();
    ui.Image image = frame.image;
    ByteData rgbaData = (await image.toByteData(format: ui.ImageByteFormat.rawRgba))!;
    Uint32List rgbaPixels = rgbaData.buffer.asUint32List();
    stackBlurRgba(rgbaPixels, image.width, image.height, 42);
    final bitmap = Bitmap.fromHeadless(
        image.width, image.height,
        rgbaPixels.buffer.asUint8List());
    return Image.memory(bitmap.buildHeaded());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: FutureBuilder<Image>(
          future: _futureImage,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.done &&
                snapshot.hasData) {
              return snapshot.data!;
            } else if (snapshot.hasError) {
              return Text("${snapshot.error}");
            }
            return CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

此示例首先加载了一个名为 sample.png 的图片资源，然后对其进行模糊处理，并在屏幕上显示模糊后的图片。请确保在 pubspec.yaml 文件中添加相应的依赖项和资源路径。