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

举报
阿策小和尚 发表于 2021/12/23 08:29:17 2021/12/23
【摘要】 0 基础学习 Flutter,第四十二步:简单尝试 Flutter 截屏!

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

RepaintBoundary

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

const RepaintBoundary({ Key key, Widget child }) : super(key: key, child: child);

@override
Widget 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() 生成的数据格式一般分三种:

  1. rawRgba:未解码的 byte
  2. rawUnmodified:未解码且未修改的 byte,如灰度图;
  3. 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;
}

Directory

      若需要存储本地,跟 Android/iOS 类似,首先获取存储路径,再进行存储操作;小菜借助三方插件 path_provider 来获取图片路径;

      path_provider 提供了 getTemporaryDirectory 临时路径 / getApplicationDocumentsDirectory 全局路径等,可以根据不同的需求存储不同路径;

      小菜为了测试方便选择存放在设备根目录下 getExternalStorageDirectory

Future<String> _capturePath(name) async {
  Directory documentsDirectory = await getExternalStorageDirectory();
  String path = join(documentsDirectory.path, name);
  return path;
}

writeAsBytes

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

File(val).writeAsBytes(unitVal);

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


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

来源:阿策小和尚

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。