flutter - 在图像顶部添加文本并通过点击按钮分享图像

Question

我一直在尝试在图像上添加文本，然后允许用户共享图像。我遇到了两个我似乎无法弄清楚的问题。

1. 文本在添加到 Canvas 时溢出屏幕，没有在 TextPainter 中换行。

2. 我一直在尝试使用 FloatingActionButton 共享图像。我遇到的问题是共享实际图像而不是图像字符串。我一直在使用 esys_flutter_share包来尝试实现它，但我得到一个错误。我真的只想分享我在上面写文字的图片。

Unhandled Exception: type 'Image' is not a subtype of type 'String'

.

非常感谢任何帮助。

import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'dart:io';
import 'package:esys_flutter_share/esys_flutter_share.dart';
import 'package:flutter/services.dart' show rootBundle;

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _imageUrl = 'https://imageurl.png';
  var _img;
  var nimg;

  @override
  void initState() {

    _showImg();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var widget =
    _img != null ? Image.memory(_img) : Text('pleace click button');
    return Scaffold(
      appBar: AppBar(),
      body: Center(child: widget),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {

          final ByteData bytes = await rootBundle.load(nimg);
          await Share.file('esys image', '$nimg', bytes.buffer.asUint8List(), 'image/png');

        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }


  _showImg() async{
    var uri = Uri.parse(_imageUrl);
    var httpClient = HttpClient();
    var request = await httpClient.getUrl(uri);
    var response = await request.close();
    var imageData = <int>[];
    await response.forEach((data) async {
      imageData.addAll(data);
    });

    ui.Image image =
        await decodeImageFromList(Uint8List.fromList(imageData));
    var pictureRecorder = ui.PictureRecorder();
    var canvas = Canvas(pictureRecorder);
    var paint = Paint();
    paint.isAntiAlias = true;

    var src = Rect.fromLTWH(
        0.0, 0.0, image.width.toDouble(), image.height.toDouble());
    var dst = Rect.fromLTWH(
        0.0, 0.0, image.width.toDouble(), image.height.toDouble());
    canvas.drawRect(Rect.fromLTWH(0.0, 0.0, 200.0, 200.0), paint);
    canvas.drawImageRect(image, src, dst, paint);


    //Add text on image
    TextSpan span = new TextSpan(
        style: new TextStyle(color: Colors.white, fontSize: 150.0,
            fontFamily: 'Roboto'), text: "Here is some great text to put on top");
    TextPainter tp = new TextPainter(
        text: span, textDirection: TextDirection.ltr, textAlign: TextAlign.center);
    tp.layout();
    tp.paint(canvas, new Offset(image.width/2 - image.width/2 /2, image.height/2 - image.height/2 /3));


    var pic = pictureRecorder.endRecording();
    ui.Image img = await pic.toImage(image.width, image.height);
    var byteData = await img.toByteData(format: ui.ImageByteFormat.png);
    var buffer = byteData.buffer.asUint8List();

    //Assign image to be shared
    nimg = img;

    //Set the image as the child in the body
    setState(() {
      _img = buffer;
    });
  }

}

Answer 1

用文字分享图片的最简单方法:

1. 创建一个堆栈并将图像放入其中，将文本小部件放置在图像上您想要的任何位置。

2. 使用 RepaintBoundary 包装堆栈

3. 截图为

RenderRepaintBoundary boundary = _globalKey.currentContext.findRenderObject();
Image image = await boundary.toImage();

1. 与 esys_flutter_share 分享

附言。当然你也可以用image将文本添加到图像的包。