【Flutter 专题】42 图解页面截屏与本地保存小尝试

关注

发布于: 1 小时前

小菜因特别需求想尝试一下 Flutter 页面截屏并将图片保存在本地的功能，记录一下尝试过程。

RepaintBoundary

Flutter 提供了支持截屏的 RepaintBoundary，在需要截取部分的外层嵌套，也可以截取某一子 Widget 内容；RepaintBoundary 的结构很简单，通过 key 来判断截取的 RenderObject，最终生成一个 RenderRepaintBoundary 对象；

const RepaintBoundary({ Key key, Widget child }) : super(key: key, child: child);
@overrideWidget build(BuildContext context) {  return RepaintBoundary(      key: globalKey,      child: Scaffold(          body: Stack(children: <Widget>[        Image.asset('img/bg.jpg', width: _w, fit: BoxFit.fill),        Container(child: CustomPaint(painter: StarCanvas(_w, _h, p, s, st))),        itemWid(1, 2),        itemWid(1, 1),        itemWid(0, 1),        itemWid(0, 2),      ])));}

复制代码

ui.Image

通过 RenderRepaintBoundary 获取的对象 .toImage() 后转为 ui.Image 类型字节流，最终存储为 png 格式，在转为常用的 Uint8List 存储在内存中，借助 image.memory() 方式展示在具体位置；而当前只是获取到图片的流信息，仅可用于操作，还未存储在本地；

toByteData() 生成的数据格式一般分三种：

rawRgba：未解码的 byte；
rawUnmodified：未解码且未修改的 byte，如灰度图；
png 为我们常用的 PNG 图片；

Future<Uint8List> _capturePng(globalKey) async {  RenderRepaintBoundary boundary = globalKey.currentContext.findRenderObject();  ui.Image image = await boundary.toImage();  ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);  Uint8List picBytes = byteData.buffer.asUint8List();  return picBytes;}

复制代码

writeAsBytes

文件的保存很简单，直接将 Uint8List 写入到所在文件路径下即可；

File(val).writeAsBytes(unitVal);

复制代码

但此时存储或自定义文件路径，可能会遇到权限问题，小菜为了测试方便在 Android 中添加读写权限，并手动在设备中打开，之后便可正常存储；

小菜对文件存储还很不熟悉，对于动态申请权限方面也在学习过程中，会在今后的博客中逐渐整理，如有不对的地方请多多指导！

来源：阿策小和尚

发布于: 1 小时前阅读数: 2

原文链接:【http://xie.infoq.cn/article/e66fd38e7d14fd974b06fdd42】。文章转载请联系作者。

阿策小和尚

关注

还未添加个人签名 2021.05.13 加入

Android / Flutter 小菜鸟～

发布

暂无评论

创作场景

【Flutter 专题】42 图解页面截屏与本地保存小尝试

RepaintBoundary

ui.Image

Directory

writeAsBytes

阿策小和尚

评论