Flutter图像模糊预览插件blurhash_ffi的使用

blurhash_ffi 是一个用于Flutter的插件，它实现了基于C语言的FFI（Foreign Function Interface）Blurhash编解码器。该插件支持Android、iOS、Linux、macOS和Windows平台，并且在性能和质量上与官方Blurhash实现相匹配。

使用方法

添加依赖

要在项目中使用blurhash_ffi，首先需要在pubspec.yaml文件中添加依赖：

dependencies:
  blurhash_ffi: ^latest_version # 替换为最新版本号

编解码示例

单步编解码

以下是一个简单的例子，展示了如何在一个步骤中完成图像的编码和解码：

import 'package:blurhash_ffi/blurhash_ffi.dart';
import 'package:flutter/material.dart';

class BlurhashMyImage extends StatelessWidget {
  final String imageUrl;
  const BlurhashMyImage({required this.imageUrl, super.key});

  @override
  Widget build(BuildContext context) {
    return Image(
      image: BlurhashTheImage(
        NetworkImage(imageUrl), // 可以使用任何你想要的ImageProvider。
        decodingHeight: 1920,
        decodingWidth: 1080,
      ),
      alignment: Alignment.center,
      fit: BoxFit.cover,
    );
  }
}

编码

下面是如何从ImageProvider编码生成Blurhash字符串的例子：

import 'package:blurhash_ffi/blurhash_ffi.dart';

void encodeBlurhash() async {
  final imageProvider = NetworkImage('https://picsum.photos/512');
  try {
    final String blurHash = await BlurhashFFI.encode(imageProvider);
    print('Encoded blurhash: $blurHash');
  } catch (e) {
    print('Failed to encode blurhash: $e');
  }
}

解码

有三种方式可以解码Blurhash：

1. 使用BlurhashFfi小部件：

   import 'package:blurhash_ffi/blurhash_ffi.dart';
   
   class BlurHashApp extends StatelessWidget {
     const BlurHashApp({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) => MaterialApp(
       home: Scaffold(
         appBar: AppBar(title: const Text("BlurHash")),
         body: const SizedBox.expand(
           child: Center(
             child: AspectRatio(
               aspectRatio: 1.6,
               child: BlurhashFfi(hash: "L5H2EC=PM+yV0g-mq.wG9c010J}I"),
             ),
           ),
         ),
       ),
     );
   }
   

2. 使用BlurhashFfiImage作为ImageProvider：

   import 'package:blurhash_ffi/blurhash_ffi.dart';
   
   final imageProvider = BlurhashFfiImage("L5H2EC=PM+yV0g-mq.wG9c010J}I");
   
   class BlurHashApp2 extends StatelessWidget {
     const BlurHashApp2({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) => MaterialApp(
       home: Scaffold(
         appBar: AppBar(title: const Text("BlurHash")),
         body: const SizedBox.expand(
           child: Center(
             child: AspectRatio(
               aspectRatio: 1.6,
               child: Image(
                 image: imageProvider,
                 fit: BoxFit.cover,
               ),
             ),
           ),
         ),
       ),
     );
   }
   

3. 使用静态方法BlurhashFfi.decode返回ui.Image：

   import 'package:blurhash_ffi/blurhash_ffi.dart';
   import 'dart:ui' as ui;
   
   void decodeBlurhash() async {
     try {
       final ui.Image image = await BlurhashFFI.decode("L5H2EC=PM+yV0g-mq.wG9c010J}I");
       // 处理解码后的image
     } catch (e) {
       print('Failed to decode blurhash: $e');
     }
   }
   

释放资源

当不再需要进行Blurhash编解码时，记得释放相关资源：

import 'package:blurhash_ffi/blurhash_ffi.dart';

void releaseResources() {
  BlurhashFFi.free();
}

完整示例代码

为了更好地理解如何在实际应用中使用blurhash_ffi，这里提供了一个完整的示例代码，展示了如何选择图片并显示其对应的Blurhash效果：

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:blurhash_ffi/blurhash_ffi.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Future<String>? blurHashResult;
  int selectedImage = -1;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Blurhash FFI Example'),
        ),
        body: SingleChildScrollView(
          child: Container(
            padding: const EdgeInsets.all(10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [1, 2, 3].map<Widget>((e) {
                    var assetName = e == 1
                        ? 'assets/images/$e.jpg'
                        : 'assets/images/$e.png';
                    return MaterialButton(
                      padding: EdgeInsets.zero,
                      onPressed: () async {
                        blurHashResult = BlurhashFFI.encode(
                          AssetImage(assetName),
                        );
                        setState(() {
                          selectedImage = e;
                        });
                      },
                      child: ImageSelect(
                        imageProvider: AssetImage(assetName),
                        isSelected: selectedImage == e,
                      ),
                    );
                  }).toList(),
                ),
                if (blurHashResult != null)
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: FutureBuilder(
                      future: blurHashResult,
                      builder: (context, snapshot) => snapshot.hasData
                          ? Text('blurhash: ${snapshot.data}')
                          : const CircularProgressIndicator(),
                    ),
                  ),
                if (blurHashResult != null)
                  Align(
                    alignment: Alignment.center,
                    child: SizedBox(
                      height: 120,
                      width: 120,
                      child: FutureBuilder(
                          future: blurHashResult,
                          builder: (context, snapshot) {
                            if (snapshot.hasData) {
                              return BlurhashFfi(
                                hash: snapshot.data!,
                                decodingWidth: 120,
                                decodingHeight: 120,
                                imageFit: BoxFit.cover,
                                color: Colors.grey,
                                onReady: () => debugPrint('Blurhash ready'),
                                onDisplayed: () =>
                                    debugPrint('Blurhash displayed'),
                                errorBuilder: (context, error, stackTrace) =>
                                    Container(
                                        color: Colors.red,
                                        child: const Center(
                                            child: Text('Error',
                                                style: TextStyle(
                                                    color: Colors.white,
                                                    fontSize: 20,
                                                    fontWeight:
                                                        FontWeight.bold)))),
                              );
                            }
                            return const Center(
                              child: CircularProgressIndicator(),
                            );
                          }),
                    ),
                  )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class ImageSelect extends StatelessWidget {
  final ImageProvider imageProvider;
  final bool isSelected;
  const ImageSelect(
      {super.key, required this.imageProvider, this.isSelected = false});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        decoration: BoxDecoration(
          border: isSelected ? Border.all(color: Colors.blue, width: 2) : null,
        ),
        child: Image(
          image: imageProvider,
          width: 100,
          height: 100,
        ),
      ),
    );
  }
}

通过上述内容，您可以快速上手blurhash_ffi插件，在您的Flutter应用中实现高效的图像模糊预览功能。更多详细信息和高级用法，请参考官方GitHub仓库。