Flutter图像哈希生成插件thumbhash_flutter的使用

Flutter图像哈希生成插件thumbhash_flutter的使用

thumbhash_flutter 是一个用于将图像哈希转换为图像的库。它是由 Evan Wallace 开发的 thumbhash 编码器的 Flutter/Dart 端口。

特性

目前，该库仅支持将哈希转换为图像，而不支持反向操作。

使用示例

首先，在你的 pubspec.yaml 文件中添加 thumbhash_flutter 依赖：

dependencies:
  thumbhash_flutter: ^0.1.0

然后，运行 flutter pub get 来获取新的依赖项。

示例代码

下面是一个完整的示例，展示了如何使用 thumbhash_flutter 插件来生成图像哈希并将其转换回图像。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Thumbhash 示例'),
        ),
        body: Center(
          child: ThumbhashImageExample(),
        ),
      ),
    );
  }
}

class ThumbhashImageExample extends StatefulWidget {
  @override
  _ThumbhashImageExampleState createState() => _ThumbhashImageExampleState();
}

class _ThumbhashImageExampleState extends State<ThumbhashImageExample> {
  String thumbhash = '';

  @override
  void initState() {
    super.initState();
    // 生成图像哈希
    final ByteData imageData = // 假设这是从某个地方获取到的图像数据
        // ByteData.fromList([/* 图像字节数据 */]);
    final Uint8List imageBytes = imageData.buffer.asUint8List();

    // 将图像字节转换为 thumbhash
    thumbhash = thumbhashFromImage(imageBytes);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Thumbhash: $thumbhash'),
        SizedBox(height: 20),
        // 将 thumbhash 转换回图像
        ThumbhashWidget(
          thumbhash: thumbhash,
          width: 100,
          height: 100,
        ),
      ],
    );
  }
}

解释

1. 导入必要的库：

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

2. 在 main() 函数中初始化应用：

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

3. 定义 MyApp 类：

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: Text('Thumbhash 示例'),
           ),
           body: Center(
             child: ThumbhashImageExample(),
           ),
         ),
       );
     }
   }
   

4. 定义 ThumbhashImageExample 类：

   class ThumbhashImageExample extends StatefulWidget {
     @override
     _ThumbhashImageExampleState createState() => _ThumbhashImageExampleState();
   }
   

5. 实现 _ThumbhashImageExampleState 类：

   class _ThumbhashImageExampleState extends State<ThumbhashImageExample> {
     String thumbhash = '';
   
     @override
     void initState() {
       super.initState();
       // 生成图像哈希
       final ByteData imageData = // 假设这是从某个地方获取到的图像数据
           // ByteData.fromList([/* 图像字节数据 */]);
       final Uint8List imageBytes = imageData.buffer.asUint8List();
   
       // 将图像字节转换为 thumbhash
       thumbhash = thumbhashFromImage(imageBytes);
     }
   
     @override
     Widget build(BuildContext context) {
       return Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text('Thumbhash: $thumbhash'),
           SizedBox(height: 20),
           // 将 thumbhash 转换回图像
           ThumbhashWidget(
             thumbhash: thumbhash,
             width: 100,
             height: 100,
           ),
         ],
       );
     }
   }