Flutter HTML转图片插件flutter_html2image的使用

Flutter HTML转图片插件flutter_html2image的使用

flutter_html2image 是一个用于从原始HTML生成完整内容截图的Flutter插件。它利用了平台特定的Web引擎来实现这一功能。

  • Android: 使用 WebView
  • iOS: 使用 WKWebView
  • Windows: 使用 Chromium

要求

  • Android: minSdkVersion 17

示例

以下是一个完整的示例，展示如何使用 flutter_html2image 插件将HTML内容转换为图片。

1. 添加依赖

在 pubspec.yaml 文件中添加 flutter_html2image 依赖：

dependencies:
  flutter_html2image: ^0.1.0

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

2. 初始化插件

创建一个 _HtmlImageGenerator 实例来加载和生成图片。

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

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

class _HtmlToImageExampleState extends State<HtmlToImageExample> {
  late HtmlImageGenerator _generator;

  [@override](/user/override)
  void initState() {
    super.initState();
    _generator = HtmlImageGenerator(); // 初始化生成器
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HTML转图片示例'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            String html = '''
              <html>
                <body style="background-color: lightblue; padding: 20px;">
                  <h1 style="color: darkblue;">Hello World!</h1>
                  <p>This is an example of HTML content.</p>
                </body>
              </html>
            ''';

            try {
              // 加载HTML内容
              await _generator.load(html);

              // 生成图片
              Uint8List image = await _generator.generate();

              // 将图片保存到文件或显示
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => Image.memory(image),
                ),
              );
            } catch (e) {
              print('生成图片失败: $e');
            }
          },
          child: Text('生成图片'),
        ),
      ),
    );
  }
}

更多关于Flutter HTML转图片插件flutter_html2image的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter HTML转图片插件flutter_html2image的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_html2image 是一个用于将 HTML 内容转换为图片的 Flutter 插件。它可以帮助你将 HTML 字符串渲染为图片，并保存到本地或直接在应用中使用。以下是如何使用 flutter_html2image 插件的详细步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_html2image 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_html2image: ^1.0.0  # 请使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 flutter_html2image 包：

import 'package:flutter_html2image/flutter_html2image.dart';

3. 使用 flutter_html2image 将 HTML 转换为图片

以下是一个简单的示例，展示如何将 HTML 字符串转换为图片并显示在应用中：

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

class HtmlToImageExample extends StatefulWidget {
  @override
  _HtmlToImageExampleState createState() => _HtmlToImageExampleState();
}

class _HtmlToImageExampleState extends State<HtmlToImageExample> {
  Image? _image;

  Future<void> _convertHtmlToImage() async {
    final htmlContent = """
      <html>
        <body>
          <h1>Hello, World!</h1>
          <p>This is an example of HTML to Image conversion in Flutter.</p>
        </body>
      </html>
    """;

    final imageBytes = await FlutterHtml2Image.convertFromHtml(
      html: htmlContent,
      // 可选参数
      // width: 300, // 图片宽度
      // height: 200, // 图片高度
      // backgroundColor: Colors.white, // 背景颜色
    );

    setState(() {
      _image = Image.memory(imageBytes);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HTML to Image Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (_image != null) _image!,
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _convertHtmlToImage,
              child: Text('Convert HTML to Image'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: HtmlToImageExample(),
  ));
}

4. 运行应用

运行你的 Flutter 应用，点击按钮将 HTML 内容转换为图片并显示在屏幕上。

5. 保存图片到本地（可选）

如果你想将生成的图片保存到本地，可以使用 image_gallery_saver 插件。首先添加依赖：

dependencies:
  image_gallery_saver: ^1.7.1  # 请使用最新版本

然后在 _convertHtmlToImage 方法中添加保存图片的代码：

import 'package:image_gallery_saver/image_gallery_saver.dart';

Future<void> _convertHtmlToImage() async {
  final htmlContent = """
    <html>
      <body>
        <h1>Hello, World!</h1>
        <p>This is an example of HTML to Image conversion in Flutter.</p>
      </body>
    </html>
  """;

  final imageBytes = await FlutterHtml2Image.convertFromHtml(
    html: htmlContent,
  );

  setState(() {
    _image = Image.memory(imageBytes);
  });

  // 保存图片到本地
  final result = await ImageGallerySaver.saveImage(imageBytes);
  if (result['isSuccess']) {
    print('Image saved to gallery');
  } else {
    print('Failed to save image');
  }
}
回到顶部