Firebase存储中。
但问题是如何将这个文本保留在视频中？
是否有一种方法可以重新编码具有用户添加文本叠加的文件？
还是必须将文本信息存储到数据库中，然后每次获取并显示？
PictureRecorder将Canvas导出为位图或png格式。
生成的png图像应与源视频具有相同的大小，并且可以通过简单的Image小部件覆盖在视频上。
您还可以将此png图像上传到Firebase，然后在其他客户端下载它，以获得完全相同的外观（即使未安装字体）。
令人惊奇的是，您甚至可以在png图像中保存手绘图、贴纸、渐变和复杂形状（您可以在画布上绘制的所有内容）。
如果需要，您也可以使用某种本地库将png图像添加到视频中。
以下是一个简单的示例，展示如何生成和显示这样的png图像:import 'dart:async';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
/// @param size Video size
/// @param text Styled text
ui.Image createTextImage(Size size, TextSpan text) {
final recorder = ui.PictureRecorder();
final cullRect = Offset.zero & size;
final canvas = Canvas(recorder, cullRect);
final textPainter = TextPainter(textDirection: TextDirection.ltr, text: text);
textPainter.layout();
// draw text in center of canvas, you can adjust this as you like
final textOffset = cullRect.center.translate(-textPainter.width / 2, textPainter.height / 2);
textPainter.paint(canvas, textOffset);
// you can also draw other geometrical shapes, gradients, paths...
canvas.drawCircle(Offset(100.0, 100.0), 50.0, Paint()..color = Color(0xffff00ff));
final picture = recorder.endRecording();
final image = picture.toImage(size.width.toInt(), size.height.toInt());
return image;
}
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Canvas Test',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
/// Bytes of the generated image
Future<Uint8List> _imageBytes;
_generateImage() {
// Get this size from your video
final videoSize = Size(720.0, 1280.0);
final textStyle = TextStyle(
fontFamily: 'Roboto',
fontSize: 80.0,
color: Colors.red,
);
final text = TextSpan(text: 'Hello World', style: textStyle);
// Generate the image
final imageInfo = createTextImage(videoSize, text);
// Convert to png
final imageBytes =
imageInfo.toByteData(format: ui.ImageByteFormat.png).then((byteData) => Uint8List.view(byteData.buffer));
setState(() {
_imageBytes = imageBytes;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Canvas Test'),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FutureBuilder(
future: _imageBytes,
builder: (BuildContext context, AsyncSnapshot<Uint8List> snapshot) {
if (!snapshot.hasData) return Text('No data');
// Display the generated image in a box
return DecoratedBox(
decoration: BoxDecoration(border: Border.all()),
child: Image.memory(
snapshot.data,
width: 180.0,
height: 320.0,
),
);
},
),
RaisedButton(onPressed: _generateImage, child: Text('Generate Image'))
],
),
),
);
}
}