Question

我一直试图在图像上方添加文本，然后允许用户共享图像。我有两个似乎无法解决的问题。

添加到Canvas时，文本从屏幕上溢出，没有包裹在TextPainter中。
我一直在尝试使用FloatingActionButton共享图像。我遇到的问题是共享实际图像而不是图像字符串。我一直在使用esys_flutter_share包来尝试实现它，但出现错误。我真的只想分享我在上面写过文字的图片。

未处理的异常：“图像”类型不是“字符串”类型的子类型

。

非常感谢您的帮助。

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

esys_flutter_share不具有同时共享两种数据类型的能力。我已经遇到了这个问题，并通过在我的代码中使用此程序包并编辑允许我们共享两种数据类型的方法来解决此问题。这是已编辑的软件包文件。

如何使用本地代码打包？

结帐this答案

更新后的代码URL为this，下载该URL并遵循上面的答案。

Answer 2

与文字共享图片的最简单方法：

创建一个堆栈并将图像放入其中，将“文本”小部件放置在图像上所需的任何位置。
使用RepaintBoundary包装堆栈
使用

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

与esys_flutter_share分享

PS。当然，您也可以使用image包向图像添加文本。

在图像上方添加文本并通过点击按钮共享图像

2 个答案: