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,
),
],
),
),
),
);
}
}

flutter中将widget转为base64的更多相关文章

  1. 在C#中将图像转换为BASE64

    本教程说明如何在C#.NET Windows Forms Application中将图像转换为base64字符串,以及将base64字符串转换为图像.您可以创建一个新的Windows窗体应用程序项目来 ...

  2. JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传

    主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: ...

  3. pandas中将timestamp转为datetime

    参考自:http://stackoverflow.com/questions/35312981/using-pandas-to-datetime-with-timestamps 在pandas Dat ...

  4. Opencv中将CvMat转为IplImage

    Opencv中将CvMat转为IplImage,并在内存获得起头指针,而不用cvSaveImage(),贴上代码 IplImage * imgg = NULL; imgg = cvCreateImag ...

  5. canvas将图片转为base64

    最简例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...

  6. 011_如何decode url及图片转为base64文本编码总结

    一.咱们经常会遇到浏览器给encode后的url,如何转换成咱们都能识别的url呢?很简单,talk is easy,Please show me your code,如下所示: (1)英文decod ...

  7. js将图片转为base64编码,以字符串传到后台存入数据库

    (前台在中approve_edit.html中,后台不变) 链接参考:http://www.cnblogs.com/Strom-HYL/p/6782176.html 该链接文中并没有用到easyUI的 ...

  8. Java中将字符串转为驼峰格式

    本文不再更新,可能存在内容过时的情况,实时更新请移步我的新博客:Java中将字符串转为驼峰格式: 使用CaseUtils 对Java字符串进行转换为驼峰格式: CaseUtils.toCamelCas ...

  9. C#将图片字节流转为Base64直接放入html的img标签src属性中

    1,图片要转为byte[], 2,注意加上“data:image/jpeg;base64,”,这里jpeg可以换成其他. string html = "<img src='data:i ...

随机推荐

  1. XML技术

    XML是一种可扩展标记语言,用来标记数据.定义数据类型,1998年由W3W发布1.0.版本,与HTML语言相比,可以自定义可扩展标签格式,但是语法严格. XML可以用来存储数据,可移植性强,主要充当配 ...

  2. java基础---集合(2)

    一. Set 集合 java.util.Set集合是Collection集合的子集合,与List集合平级.该集合中元素没有先后放入次序,且不允许重复. 存储的数据在底层数组中并非按照数组索引的顺序添加 ...

  3. Luogu P4313 文理分科

    link 最小割 双倍经验 这道题运用了最小割最常用的一种用法:集合划分. 因为源汇最小割即就是将源汇划分到不同的集合,那么最简单的应用就是最小代价划分集合了. 本题中,题意是将 \(n\cdot m ...

  4. python使用笔记10--os,sy模块

    os操作文件,可以输入绝对路径,也可以输入相对路径 windows使用路径用\连接 Linux使用路径用/连接 但是我的电脑是windows 用/也没问题 1.os常用方法 1 import os 2 ...

  5. IDA 修改后保存

    关键点找到了.把 jz short loc_10004753 改成jnz short loc_10004753即可. IDA->edit->Patch program->Assemb ...

  6. [刘阳Java]_MySQL数据优化总结_查询备忘录

    数据库优化是在后端开发中必备技能,今天写一篇MySQL数据优化的总结,供大家看看 一.MySQL数据库优化分类 我们通过一个图片形式来看看数据优化一些策略问题 不难看出,优化有两条路可以选择:硬件与技 ...

  7. [刘阳Java]_Spring AOP注解详细介绍_第8讲

    这节内容非常关键,我们会比较详细地介绍Spring AOP注解的使用 1. 要使用Spring AOP注解,必须满足如下的事项 导入Aspectj的jar.Spring3.0-AOP.jar.aopa ...

  8. MySQL中的redo log和undo log

    MySQL中的redo log和undo log MySQL日志系统中最重要的日志为重做日志redo log和归档日志bin log,后者为MySQL Server层的日志,前者为InnoDB存储引擎 ...

  9. vue组件之间通信总结(超详细)

    组件通信在我们平时开发过程中,特别是在vue和在react中,有着举足轻重的地位.本篇将总结在vue中,组件之间通信的几种方式: props.$emit $parent.$children $attr ...

  10. Jmeter入门 浏览器设置代理服务器和录制脚本

    第一步: 可以设置浏览器代理,本文章推荐使用火狐浏览器 在浏览器-首选项--网络设置里面设置代理服务器 注意:端口号可以自行设置,但是不可以与本机其他代理产生冲突 第二步: 打开jmeter工具,添加 ...