flutter中将widget转为base64
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的更多相关文章
- 在C#中将图像转换为BASE64
本教程说明如何在C#.NET Windows Forms Application中将图像转换为base64字符串,以及将base64字符串转换为图像.您可以创建一个新的Windows窗体应用程序项目来 ...
- JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传
主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: ...
- pandas中将timestamp转为datetime
参考自:http://stackoverflow.com/questions/35312981/using-pandas-to-datetime-with-timestamps 在pandas Dat ...
- Opencv中将CvMat转为IplImage
Opencv中将CvMat转为IplImage,并在内存获得起头指针,而不用cvSaveImage(),贴上代码 IplImage * imgg = NULL; imgg = cvCreateImag ...
- canvas将图片转为base64
最简例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...
- 011_如何decode url及图片转为base64文本编码总结
一.咱们经常会遇到浏览器给encode后的url,如何转换成咱们都能识别的url呢?很简单,talk is easy,Please show me your code,如下所示: (1)英文decod ...
- js将图片转为base64编码,以字符串传到后台存入数据库
(前台在中approve_edit.html中,后台不变) 链接参考:http://www.cnblogs.com/Strom-HYL/p/6782176.html 该链接文中并没有用到easyUI的 ...
- Java中将字符串转为驼峰格式
本文不再更新,可能存在内容过时的情况,实时更新请移步我的新博客:Java中将字符串转为驼峰格式: 使用CaseUtils 对Java字符串进行转换为驼峰格式: CaseUtils.toCamelCas ...
- C#将图片字节流转为Base64直接放入html的img标签src属性中
1,图片要转为byte[], 2,注意加上“data:image/jpeg;base64,”,这里jpeg可以换成其他. string html = "<img src='data:i ...
随机推荐
- XML技术
XML是一种可扩展标记语言,用来标记数据.定义数据类型,1998年由W3W发布1.0.版本,与HTML语言相比,可以自定义可扩展标签格式,但是语法严格. XML可以用来存储数据,可移植性强,主要充当配 ...
- java基础---集合(2)
一. Set 集合 java.util.Set集合是Collection集合的子集合,与List集合平级.该集合中元素没有先后放入次序,且不允许重复. 存储的数据在底层数组中并非按照数组索引的顺序添加 ...
- Luogu P4313 文理分科
link 最小割 双倍经验 这道题运用了最小割最常用的一种用法:集合划分. 因为源汇最小割即就是将源汇划分到不同的集合,那么最简单的应用就是最小代价划分集合了. 本题中,题意是将 \(n\cdot m ...
- python使用笔记10--os,sy模块
os操作文件,可以输入绝对路径,也可以输入相对路径 windows使用路径用\连接 Linux使用路径用/连接 但是我的电脑是windows 用/也没问题 1.os常用方法 1 import os 2 ...
- IDA 修改后保存
关键点找到了.把 jz short loc_10004753 改成jnz short loc_10004753即可. IDA->edit->Patch program->Assemb ...
- [刘阳Java]_MySQL数据优化总结_查询备忘录
数据库优化是在后端开发中必备技能,今天写一篇MySQL数据优化的总结,供大家看看 一.MySQL数据库优化分类 我们通过一个图片形式来看看数据优化一些策略问题 不难看出,优化有两条路可以选择:硬件与技 ...
- [刘阳Java]_Spring AOP注解详细介绍_第8讲
这节内容非常关键,我们会比较详细地介绍Spring AOP注解的使用 1. 要使用Spring AOP注解,必须满足如下的事项 导入Aspectj的jar.Spring3.0-AOP.jar.aopa ...
- MySQL中的redo log和undo log
MySQL中的redo log和undo log MySQL日志系统中最重要的日志为重做日志redo log和归档日志bin log,后者为MySQL Server层的日志,前者为InnoDB存储引擎 ...
- vue组件之间通信总结(超详细)
组件通信在我们平时开发过程中,特别是在vue和在react中,有着举足轻重的地位.本篇将总结在vue中,组件之间通信的几种方式: props.$emit $parent.$children $attr ...
- Jmeter入门 浏览器设置代理服务器和录制脚本
第一步: 可以设置浏览器代理,本文章推荐使用火狐浏览器 在浏览器-首选项--网络设置里面设置代理服务器 注意:端口号可以自行设置,但是不可以与本机其他代理产生冲突 第二步: 打开jmeter工具,添加 ...