Flutter HTML转图片插件html_to_image的使用

Flutter HTML转图片插件html_to_image的使用

Flutter 插件 html_to_image 可以在 Android 和 iOS 上将 HTML 文件转换为图片。

需求

  • Android: 最低 SDK 版本 21
  • iOS: 最低部署目标 11.0

使用方法

从 HTML 内容转换为图片

Future<Uint8List> convertToImage(String content, Duration delay, int? width)

示例代码

final imageBytes = await HtmlToImage.convertToImage(
  content: content,
);
final image = Image.memory(imageBytes);

从 HTML 资产转换为图片

Future<Uint8List> convertToImageFromAsset(String asset, Duration delay, int? width)

示例代码

final imageBytes = await HtmlToImage.convertToImageFromAsset(
  asset: 'assets/example.html',
);
final image = Image.memory(imageBytes);

默认延迟为 200 毫秒，默认宽度为设备宽度。

完整示例代码

以下是完整的示例代码，演示了如何使用 html_to_image 插件将 HTML 内容转换为图片，并允许用户输入 HTML 内容或从资产文件中加载 HTML 内容。

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

import 'package:flutter/services.dart';
import 'package:html_to_image/html_to_image.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late final TextEditingController _controller;
  Uint8List? img;

  static const _dummyContent = '''
  <html>
  <head>
  <title>
  Example of Paragraph tag
  </title>
  </head>
  <body>
  <p> <!-- It is a Paragraph tag for creating the paragraph -->
  <b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language
  is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides a flexible way for designing the
  web pages along with the text.
  <img src="https://picsum.photos/200/300" />
  <br />
  </body>
  </html>
  ''';

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = TextEditingController(text: _dummyContent);
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  Future<void> convertToImage() async {
    final image = await HtmlToImage.tryConvertToImage(
      content: _controller.text,
    );
    setState(() {
      img = image;
    });
  }

  Future<void> convertToImageFromAsset() async {
    final image = await HtmlToImage.convertToImageFromAsset(
      asset: 'assets/example.html',
    );
    setState(() {
      img = image;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('HTML to Image Converter'),
        ),
        body: img == null
            ? Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  children: [
                    Expanded(
                      child: TextField(
                        controller: _controller,
                        maxLines: 100,
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        ElevatedButton(
                          onPressed: convertToImage,
                          child: const Text('Convert to Image'),
                        ),
                        ElevatedButton(
                          onPressed: convertToImageFromAsset,
                          child: const Text('Convert from Asset'),
                        ),
                      ],
                    ),
                  ],
                ),
              )
            : Image.memory(img!),
        floatingActionButton: img != null
            ? FloatingActionButton(
                onPressed: () {
                  setState(() {
                    img = null;
                  });
                },
                tooltip: 'Clear',
                child: const Icon(Icons.clear),
              )
            : null,
      ),
    );
  }
}

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

1 回复

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


在 Flutter 中，如果你需要将 HTML 内容转换为图片，可以使用 flutter_html_to_image 插件。这个插件允许你将 HTML 字符串渲染为图像，并且可以保存为文件或直接在应用中使用。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  flutter_html_to_image: ^1.0.0

然后运行 flutter pub get 来安装插件。

基本用法

以下是一个简单的示例，展示如何使用 flutter_html_to_image 插件将 HTML 转换为图片并显示在应用中。

import 'package:flutter/material.dart';
import 'package:flutter_html_to_image/flutter_html_to_image.dart';
import 'dart:typed_data';
import 'dart:ui' as ui;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HtmlToImageExample(),
    );
  }
}

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

class _HtmlToImageExampleState extends State<HtmlToImageExample> {
  Uint8List? _imageBytes;

  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 FlutterHtmlToImage.convertFromHtml(htmlContent);
    setState(() {
      _imageBytes = 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 (_imageBytes != null)
              Image.memory(_imageBytes!)
            else
              Text('No image generated yet.'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _convertHtmlToImage,
              child: Text('Convert HTML to Image'),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

  1. 依赖导入：导入了 flutter_html_to_image 插件以及其他必要的 Dart 库。

  2. HTML 内容：定义了一个简单的 HTML 字符串 htmlContent，包含一个标题和一个段落。

  3. _convertHtmlToImage 方法：使用 FlutterHtmlToImage.convertFromHtml 方法将 HTML 转换为图片的字节数据，并将其存储在 _imageBytes 中。

  4. UI 构建：在 build 方法中，根据 _imageBytes 是否为空来决定显示图片或提示文本。点击按钮会触发 _convertHtmlToImage 方法。

注意事项

  • flutter_html_to_image 插件依赖于 WebView 来渲染 HTML 内容，因此在实际使用中可能会受到 WebView 的性能和限制影响。
  • 生成的图片大小和质量可能会受到 HTML 内容的复杂性和设备屏幕分辨率的影响。

保存图片到文件

如果你想将生成的图片保存到文件系统中，可以使用 dart:io 库中的 File 类。例如：

import 'dart:io';

Future<void> _saveImageToFile(Uint8List imageBytes) async {
  final directory = await getApplicationDocumentsDirectory();
  final file = File('${directory.path}/html_image.png');
  await file.writeAsBytes(imageBytes);
}
回到顶部