flutter中可以通过RepaintBoundary widget中的toImage方法将页面中的widget转为base64。
如何使用?
首先要在全局定义一个global key,分配给RepaintBoundary。然后将要转化为图片的widget用RepaintBoundary包裹。
关键代码:
RenderRepaintBoundary boundary = _globalKey.currentContext.findRenderObject(); // 获取页面渲染对象
获取到页面渲染对象之后,就可以通过toImage方法将对象转化为raw image data,然后通过下面三步可以将字节数据转化为base64字符:
ui.Image image = await boundary.toImage(pixelRatio: 3.0);
ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List pngBytes = byteData.buffer.asUint8List();
String bs64 = base64Encode(pngBytes);
完整可运行代码:
import 'dart:async';
import 'dart:convert';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
GlobalKey _globalKey = new GlobalKey();
Future<Uint8List> _capturePng() async {
try {
print('inside');
RenderRepaintBoundary boundary =
_globalKey.currentContext.findRenderObject();
ui.Image image = await boundary.toImage(pixelRatio: 3.0);
ByteData byteData =
await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List pngBytes = byteData.buffer.asUint8List();
String bs64 = base64Encode(pngBytes);
print(pngBytes);
print(bs64);
return pngBytes;
} catch (e) {
print(e);
}
}
@override
Widget build(BuildContext context) {
return RepaintBoundary(
key: _globalKey,
child: new Scaffold(
appBar: new AppBar(
title: new Text('Widget To Image demo'),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'点击下面按钮',
),
new RaisedButton(
child: Text('点我'),
onPressed: _capturePng,
),
],
),
),
),
);
}
}