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

Question

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

1. 添加到画布时，文本会溢出屏幕，并且不会换行在文本绘制器中。

2. 我一直在尝试使用浮动操作按钮共享图像。我遇到的问题是共享实际图像而不是图像字符串。我一直在使用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

与文本共享图像的最简单方法：

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

2. 使用重绘边界包装堆栈

3. 截图

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

4. 与esys_flutter_share分享

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

Answer 2

esys_flutter_share

无法同时共享两种数据类型。我遇到了这个问题，并通过在我的代码中使用此包并编辑它的方法来解决，这些方法允许我们共享两种数据类型。这是编辑过的包文件。

如何获取本地代码的包裹？

查看此答案

更新后的代码网址是这个，下载它并按照上面的答案进行操作。