Flutter图片模糊预览插件blurhash_web的使用

blurhash_web 是 blurhash 插件的 Web 实现版本，用于在 Web 平台上生成和显示模糊图像预览。它可以帮助开发者在加载真实图片之前，先显示一个低分辨率的模糊占位图，从而提升用户体验。

使用方法

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 blurhash 依赖（blurhash_web 已包含在其中）：

dependencies:
  blurhash: ^x.x.x

然后运行以下命令安装依赖：

flutter pub get

2. 生成 BlurHash

BlurHash 的生成需要一张真实的图片。你可以使用工具生成 BlurHash 字符串，或者使用代码动态生成。以下是使用 blurhash 插件生成 BlurHash 的示例：

import 'package:blurhash/blurhash.dart';

void main() {
  // 假设你有一张图片的 Base64 数据
  String imageBase64 = "your_image_base64_data_here";

  // 生成 BlurHash
  BlurHash.fromImage(imageBase64).then((blurHash) {
    print('Generated BlurHash: ${blurHash.hash}');
  });
}

3. 在 Web 上显示 BlurHash 和真实图片

以下是一个完整的示例，展示如何在 Web 上使用 blurhash_web 插件来显示模糊预览和真实图片：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('BlurHash Web Example'),
        ),
        body: Center(
          child: BlurHashWebExample(),
        ),
      ),
    );
  }
}

class BlurHashWebExample extends StatefulWidget {
  [@override](/user/override)
  _BlurHashWebExampleState createState() => _BlurHashWebExampleState();
}

class _BlurHashWebExampleState extends State<BlurHashWebExample> {
  String _blurHash = ''; // 存储生成的 BlurHash
  String _imageUrl = ''; // 存储真实图片的 URL

  [@override](/user/override)
  void initState() {
    super.initState();

    // 模拟从网络获取图片 Base64 数据并生成 BlurHash
    Future.delayed(Duration(seconds: 1), () async {
      String imageBase64 = await fetchImageBase64(); // 获取图片 Base64 数据
      BlurHash.fromImage(imageBase64).then((blurHash) {
        setState(() {
          _blurHash = blurHash.hash; // 保存生成的 BlurHash
        });
      });
    });

    // 模拟从网络获取真实图片的 URL
    Future.delayed(Duration(seconds: 2), () {
      setState(() {
        _imageUrl = 'https://via.placeholder.com/300'; // 替换为实际图片 URL
      });
    });
  }

  // 模拟从网络获取图片 Base64 数据
  Future<String> fetchImageBase64() async {
    // 返回一张图片的 Base64 数据
    return "your_image_base64_data_here";
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        if (_blurHash.isNotEmpty)
          Container(
            width: 300,
            height: 300,
            child: BlurHash(
              hash: _blurHash,
              image: _imageUrl,
              duration: Duration(milliseconds: 800),
            ),
          ),
        SizedBox(height: 20),
        if (_imageUrl.isNotEmpty)
          Text(
            '真实图片加载完成！',
            style: TextStyle(fontSize: 18),
          ),
      ],
    );
  }
}