前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【Flutter 专题】42 图解页面截屏与本地保存小尝试

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

作者头像
阿策小和尚
发布2019-08-12 16:29:51
2.1K0
发布2019-08-12 16:29:51
举报
文章被收录于专栏:阿策小和尚

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

RepaintBoundary

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

代码语言:javascript
复制
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 图片;
代码语言:javascript
复制
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

代码语言:javascript
复制
Future<String> _capturePath(name) async {
  Directory documentsDirectory = await getExternalStorageDirectory();
  String path = join(documentsDirectory.path, name);
  return path;
}

writeAsBytes

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

代码语言:javascript
复制
File(val).writeAsBytes(unitVal);

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


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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-04-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 阿策小和尚 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • RepaintBoundary
  • ui.Image
  • Directory
  • writeAsBytes
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档