Flutter 42: 图解页面截屏与本地保存小尝试

      小菜因特别需求想尝试一下 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 中添加读写权限,并手动在设备中打开,之后便可正常存储;


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

来源:阿策小和尚

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,386评论 6 479
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,939评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,851评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,953评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,971评论 5 369
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,784评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,126评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,765评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,148评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,479评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,080评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2 343

推荐阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,357评论 0 17
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,421评论 1 45
  • 一、初识flutter image 在讲解源码之前,我们先看下面几个例子,回顾一下flutter加载图片资源的方式...
    五月_f6d4阅读 11,168评论 3 23
  • ¥开启¥ 【标题栏(ActionBar)】 〖2017-08-06 00:50:39〗 《标题栏(ActionBa...
    小菜c阅读 1,232评论 0 5
  • 我们今天分享的主题是:临在 临在就是有觉察力的安住在当下,也就是活在当下的意思,这里面有觉察力,有安住,在当下。 ...
    排列师刘红莲阅读 345评论 0 3