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. 【Spring】Spring中的循环依赖及解决

    什么是循环依赖? 就是A对象依赖了B对象,B对象依赖了A对象. 比如: // A依赖了B class A{ public B b; } // B依赖了A class B{ public A a; } ...

  2. 00JAVA语法基础_六位验证码 01

    在网上看了许多的源程序,涉及到的东西也不太一样,多了图形处理的,由于还没理解太明白,只是做了控制台. package Six_Code; import java.util.Random; import ...

  3. 手写一个超简单的Vue

    基本结构 这里我根据自己的理解模仿了Vue的单文件写法,通过给Vue.createApp传入参数再挂载元素来实现页面与数据的互动. 其中理解不免有错,希望大佬轻喷. 收集数据 这里将Vue.creat ...

  4. 7.27考试总结(NOIP模拟25)[random·string·queue]

    死亡的尽头,没有神 T1 random 解题思路 这波是找规律完胜了.. lby dalao根据样例找出了正确的式子:\(\dfrac{n^2-1}{9}\) 然而,我这个菜鸡却推出了这样一个错误的式 ...

  5. odoo12常用的方法

    2019-09-13 今天是中秋节,星期五 #自定义显示名称 def name_get(self): result = [] for order in self: rec_name = "% ...

  6. netcore一键nssm发布为windows服务

    AntDeploy 是我开发一款开源一键部署工具包 发布功能支持: docker容器一键部署 docker镜像一键发布 支持iis一键部署 windows服务一键部署 linux服务一键部署 支持增量 ...

  7. vue日记之可展开的消息气泡

    项目小需求之聊天气泡可展开内容 因为某些信息内容太长或者某种原因必须分行输出,这就导致了有时候一个气泡占据了一整个聊天区域 所以我打算实现一个在该气泡加载的时候判断其气泡长度,并在长度过长的情况下进行 ...

  8. Python爬虫+可视化教学:爬取分析宠物猫咪交易数据

    前言 各位,七夕快到了,想好要送什么礼物了吗? 昨天有朋友私信我,问我能用Python分析下网上小猫咪的数据,是想要送一只给女朋友,当做礼物. Python从零基础入门到实战系统教程.源码.视频 网上 ...

  9. 科普—为什么要用ECDSA加签及其数学上的验签证明

    在上文介绍了ECDSA算法流程及模块划分,为了帮助一些小白弄懂啥是ECDSA,特此开一篇科普博文. 一.首先为啥要进行数字签名? 假设Alice要将一份合同m传输给Bob,合同上附有Alice的电子纸 ...

  10. GPB重磅!浙大李兰娟院士团队修饰多组学研究揭示炎症反应新机制

    炎症 (inflammation) 是机体对致炎因子的损伤所发生的一种以防御反应为主的基本病理过程.翻译后修饰(PTMs)在调节多种炎症信号通路中起着重要作用,如磷酸化(phosphorylation ...