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

发布于 1周前 作者 h691938207 来自 Flutter

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

简介

flutter_thumbhash 是一个 Flutter 插件，实现了 ThumbHash 算法。ThumbHash 是一种非常紧凑的图像占位符表示方法。通过使用这个插件，你可以轻松地生成和显示图像的哈希值。

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_thumbhash: ^最新版本号

然后运行 flutter pub get 来安装依赖。

使用

生成哈希值

你可以从 Base64 编码的字符串生成 ThumbHash 对象：

final hash = ThumbHash.fromBase64('3OcRJYB4d3h/iIeHeEh3eIhw+j3A');

显示图像

你可以将 ThumbHash 对象转换为 Image 并显示在界面上：

Image(
  image: hash.toImage(),
)

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 flutter_thumbhash 插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final hash = ThumbHash.fromBase64('3OcRJYB4d3h/iIeHeEh3eIhw+j3A');
    return Scaffold(
      backgroundColor: hash.toAverageColor(),
      body: Image(
        image: hash.toImage(),
        height: double.infinity,
        width: double.infinity,
        fit: BoxFit.contain,
      ),
    );
  }
}

结果

运行上述代码后，你将看到一个占位符图像，背景颜色为图像的平均颜色。

resulting placeholder image

总结

flutter_thumbhash 插件提供了一种简单的方法来生成和显示图像的哈希值。通过使用这个插件，你可以轻松地在 Flutter 应用中实现高效的图像占位符功能。希望这篇教程对你有所帮助！如果有任何问题或建议，请随时提出。


更多关于Flutter图像哈希生成插件flutter_thumbhash的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter图像哈希生成插件flutter_thumbhash的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 flutter_thumbhash 插件来生成图像哈希值的示例代码。这个插件可以用来快速生成图像的感知哈希（Perceptual Hash），这在图像相似度检测中非常有用。

首先，确保你已经在 pubspec.yaml 文件中添加了 flutter_thumbhash 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_thumbhash: ^latest_version  # 请替换为最新的版本号

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

接下来，你可以在你的 Flutter 应用中使用这个插件。以下是一个完整的示例，展示了如何加载图像并生成其哈希值：

import 'package:flutter/material.dart';
import 'package:flutter_thumbhash/flutter_thumbhash.dart';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:image_picker/image_picker.dart';  // 用于选择图像

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String? imageHash;
  File? imageFile;

  final ImagePicker _picker = ImagePicker();

  Future<void> _pickImage() async {
    final pickedFile = await _picker.pickImage(source: ImageSource.gallery);

    if (pickedFile != null) {
      setState(() {
        imageFile = File(pickedFile.path);
      });

      _generateHash(imageFile!);
    }
  }

  Future<void> _generateHash(File image) async {
    final Uint8List imageBytes = await image.readAsBytes();
    final Completer<ui.Image> completer = Completer<ui.Image>();

    ui.decodeImageFromList(imageBytes, (ui.Image decodedImage) {
      completer.complete(decodedImage);
    });

    ui.Image? imageDecoded = await completer.future;

    if (imageDecoded != null) {
      final String hash = await ThumbHash.getHash(imageDecoded);
      setState(() {
        imageHash = hash;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: _pickImage,
          child: Text('Pick Image'),
        ),
        SizedBox(height: 20),
        if (imageFile != null)
          Image.file(imageFile!, width: 200, height: 200),
        SizedBox(height: 20),
        if (imageHash != null)
          Text('Image Hash: $imageHash'),
      ],
    );
  }
}

解释

  1. 依赖管理：在 pubspec.yaml 中添加 flutter_thumbhash 和 image_picker 依赖。image_picker 用于从设备图库中选择图像。

  2. UI结构：创建了一个简单的 Flutter 应用，包含一个按钮用于选择图像，以及显示所选图像和其哈希值的区域。

  3. 图像选择：使用 ImagePicker 从图库中选择图像。

  4. 图像哈希生成：

    • 使用 File.readAsBytes() 方法读取图像文件的字节数据。
    • 使用 ui.decodeImageFromList() 方法将字节数据解码为 ui.Image 对象。
    • 使用 ThumbHash.getHash() 方法生成图像的哈希值。

  5. 显示结果：将生成的哈希值显示在界面上。

这个示例展示了如何在 Flutter 应用中使用 flutter_thumbhash 插件来生成图像的哈希值。你可以根据需要进行进一步的修改和扩展。

回到顶部