背景
最近遇到一个项目中的需求： 接入native三方打印SDK，将flutter绘制的页面进行打印。打印SDK支持打印bitmap图片数据。整体的思路是将flutter页面进行渲染，转换成图片数据，将图片数据通过methodChannel以字节数组的形式传递到原生层进行打印。
下面我们来重点说说视图转图片的部分
RepaintBoundary
-
防止重绘
在自定义绘制时，我们常常使用 RepaintBoundary 做性能优化，来避免重复绘制。RepaintBoundary 内部的 widget 拥有独立画布，可以不被干扰，官方很多组件外层也包了层 RepaintBoundary。
SingleChildScrollView(
Column(
children:[
WidgetA,
WidgetB,
RepaintBoundary( -> 外层嵌套 RepaintBoundary ，当页面进行滚动时，CustomPaint 不会进行重绘。
child: CustomPaint(),
),
]
)
)
-
生成截图
今天，我们用到 RepaintBoundary 的第二个常用能力：生成截图。
final _boundaryKey = GlobalKey();
@override
void initState() {
super.initState();
SchedulerBinding.instance?.addPostFrameCallback((_) { -> 监听页面绘制，绘制完成开始生成截图
_captureWidget();
});
}
/// 通过 RenderRepaintBoundary 生成图片
void _captureWidget() async {
final boundary = _boundaryKey.currentContext?.findRenderObject();
if (boundary != null && boundary is RenderRepaintBoundary) {
final image = await boundary.toImage();
ByteData? byteData = await image.toByteData(format: ImageByteFormat.png);
if (byteData != null) {
// 图片数据生成成功，用法在下面
}
}
}
@override
Widget build(BuildContext context) {
return SingleChildScrollView( -> 外层嵌套支持滚动，可生成长屏截图
child: RepaintBoundary(
key: _boundaryKey,
child: widgetA, —> widgetA 为截图的视图层
)
);
}
方法_captureWidget 中 ByteData 即为生成的图片数据，具体用法如下：
//Unit8List 就是一个 byte[]
Unit8List imageData = byteData.buffer.asUnit8List();
- 直接展示为
Image
...
child: Image.memory(imageData),
- 转换为
base64
...
String bs64 = base64Encode(imageData);
- 保存为本地文件
file
//tempPath 文件功能可通过官方插件 `path_provider` 来获取，如：
//Directory tempDir = await getTemporaryDirectory()
...
File(tempPath).writeAsBytes(imageData);
附注
-
image.toByteData(format: format)可以自定义存储格式，一般图片为png格式，但是要注意，如果你的RepaintBoundary包裹的部分没有设置背景色，那么存储出来的图片可能会有背景色缺失的问题。 -
toImage({double pixelRatio = 1.0})中的pixelRatio参数是生成图片像素倍数。例如，屏幕基础宽高为360px*480px， 默认输出也是360px*480px的图片文件；如果将pixelRatio设置为10，那么你输出的图片文件大小将是3600px*4800px。
Native 层如何接收 字节数组
我们知道截图生成的Unit8List，其数据结构为字节数组byte[]。下面我们用小篇幅来演示一下如何通过methodChannel接收传递字节数组。
Dart层
var params = {"imgData": imageData}
_methodChannel.invokeMethod("methodName", params)
Native层 (以android为例)
override fun onMethodCall(@NonNull call: MethodCall, @NonNull result: Result){
val imgData = call.argument<ByteArray>("imgData") as ByteArray
val bitmap = BitmapFactory.decodeByteArray(imgData, 0, imgData.size)
}
