Flutter 中可以从文本创建图像吗？

Question

我正在开发一个应用程序，用户可以登录该应用程序并可以在文本表单字段中输入文本。它还可以应用不同的字体样式和字体系列并从中生成图像。

可以实现吗？

任何帮助将不胜感激

Answer 1

这是给您的一个例子。您可以在应用程序中测试它。
它将文本绘制到画布上，然后将画布保存为图像。因此您可以将任何字体样式应用于 ParagraphBuilder。

希望对你有帮助

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController controller = TextEditingController();
  Image? img;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            TextFormField(
              controller: controller,
            ),
            ElevatedButton(onPressed: _onPressedButton, child: const Text("Create Image")),
            Container(width: 200, height: 200, color: Colors.blueGrey, child: img ?? Container())
          ],
        ),
      ),
    );
  }

  void getCanvasImage(String str) async {
    var builder = ParagraphBuilder(ParagraphStyle(fontStyle: FontStyle.normal));
    builder.addText(str);
    Paragraph paragraph = builder.build();
    paragraph.layout(const ParagraphConstraints(width: 100));

    final recorder = PictureRecorder();
    var newCanvas = Canvas(recorder);

    newCanvas.drawParagraph(paragraph, Offset.zero);

    final picture = recorder.endRecording();
    var res = await picture.toImage(100, 100);
    ByteData? data = await res.toByteData(format: ImageByteFormat.png);

    if (data != null) {
      img = Image.memory(Uint8List.view(data.buffer));
    }

    setState(() {});
  }

  void _onPressedButton() {
    getCanvasImage(controller.text);
  }
}

Answer 2

您需要像这样通过外部API发送文本https://rapidapi.com/seikan/api/img4me-text-to-image-service/之后您需要下载图像并将其显示给用户

Answer 3

尝试 flutter_pixel 包，它是 Brain_fusion 的替代品。 它提供了一种使用人工智能生成图像的更快方法。 试试这个例子：

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter_pixel/utilities/index.dart';

class ImageScreen extends StatefulWidget {
  final String title;
  const ImageScreen({Key? key, required this.title}) : super(key: key);

  @override
  State<ImageScreen> createState() => _TestState();
}

class _TestState extends State<ImageScreen> {
  bool isTextEmpty = true;
  TextEditingController textController = TextEditingController();

  Future<Uint8List> _generate(String query) async {
    textController.clear();
    setState(() {
      isTextEmpty = true;
    });
    Uint8List image = await imageGenerator(query, ImageSize.medium);
    return image;
  }

  @override
  void dispose() {
    textController.dispose();
    textController.clear();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final double width = MediaQuery.of(context).size.width;
    Authenticator.setApiToken('your api-key'); // Replace this with your edenai API key (currently has a free plan as of 02/03/2024).

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: SafeArea(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Padding(
                  padding: const EdgeInsets.all(20),
                  child: TextField(
                    controller: textController,
                    decoration: const InputDecoration(
                      labelText: 'Enter Text to Generate Image',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(20),
                  child: SizedBox(
                    width: width,
                    child: !isTextEmpty
                        ? FutureBuilder<Uint8List>(
                            future: _generate(textController.text),
                            builder: (context, snapshot) {
                              if (snapshot.connectionState ==
                                  ConnectionState.waiting) {
                                return const Center(
                                    child: CircularProgressIndicator());
                              } else if (snapshot.hasError) {
                                return Text('Error: ${snapshot.error}');
                              } else if (snapshot.hasData) {
                                return Image.memory(snapshot.data!);
                              } else {
                                return Container();
                              }
                            },
                          )
                        : const Center(
                            child: Text(
                              'Enter Text and Click the button to generate the image',
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 16,
                              ),
                            ),
                          ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (textController.text.isNotEmpty) {
            setState(() {
              isTextEmpty = false;
            });
          }
        },
        child: const Icon(Icons.art_track),
      ),
    );
  }
}