Skip to content

Move toImage() impl from RepaintRenderBoundary to OffsetLayer - #17060

Merged
tvolkert merged 4 commits into
flutter:masterfrom
tvolkert:toimage
Apr 28, 2018
Merged

tvolkert merged 4 commits into
flutter:masterfrom
tvolkert:toimage

Conversation

@tvolkert

Copy link
Copy Markdown
Contributor

///
/// See also:
///
/// * [dart:ui.Scene.toImage] for more information about the image returned.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also point to RenderRepaintBoundary

///
/// See also:
///
/// * [dart:ui.Scene.toImage] for more information about the image returned.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd add a pointer here to the toImage in RenderRepaintBoundary too.

@@ -2473,24 +2473,9 @@ class RenderRepaintBoundary extends RenderProxyBox {
/// See also:
///
/// * [dart:ui.Scene.toImage] for more information about the image returned.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also add a pointer to your new function on the layer.

///
/// * [dart:ui.Scene.toImage] for more information about the image returned.
Future<ui.Image> toImage(Size logicalSize, {double pixelRatio: 1.0}) async {
final ui.SceneBuilder builder = new ui.SceneBuilder();

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

assert pixelRatio != null

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or zero...

@gspencergoog

Copy link
Copy Markdown
Contributor

Also: tests?
32384589-a60f0e74-c078-11e7-9bc1-e5b5287aea9d

@@ -2473,24 +2473,9 @@ class RenderRepaintBoundary extends RenderProxyBox {
/// See also:

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would be good to have some sample code here showing how you go from a GlobalKey on a RepaintBoundary to a PNG.

@Hixie

Hixie commented Apr 27, 2018

Copy link
Copy Markdown
Contributor

LGTM

import 'package:vector_math/vector_math_64.dart';

import 'debug.dart';
import 'proxy_box.dart' show RenderRepaintBoundary;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nooo

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(if you just added this for the docs, you can remove it, dartdoc will figure it out magically)

/// `RepaintBoundary` to a PNG:
///
/// ```dart
/// class PngApp extends StatelessWidget {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can drop this class, it doesn't add anything to the sample

/// class PngHome extends StatefulWidget {
/// PngHome({Key key, this.title}) : super(key: key);
///
/// final String title;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can probably drop title

/// ui.Image image = await boundary.toImage();
/// ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
/// Uint8List pngBytes = byteData.buffer.asUint8List();
/// print(pngBytes);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe write them to disk rather than to the console? :-P

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But then they'd go to device disk... and I should really use the path_provider plugin, and the example gets dramatically more complicated..

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah fair enough.

/// tooltip: 'Capture PNG',
/// onPressed: _capturePng,
/// ),
/// );

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

to keep this briefer, remove the scaffold, leaving only the repaint boundary, and replace the text widget with a FlatButton that does what the FAB is doing in your example. So it's a button that takes a screenshot of itself.

@tvolkert
tvolkert merged commit a5a3332 into flutter:master Apr 28, 2018
@tvolkert
tvolkert deleted the toimage branch April 28, 2018 04:19
@aam

aam commented Apr 28, 2018

Copy link
Copy Markdown
Member

@tvolkert

Copy link
Copy Markdown
Contributor Author

Known flake -- #16839

@andreidiaconu

Copy link
Copy Markdown
Contributor

Hi! I have filed 2 new issues that might be related to this. If RepaintRenderBoundary is not positioned at [0,0], toImage() does not behave as expected - #17686.

Also, related to flakiness, Image widgets sometimes don't render - #17687

@github-actions github-actions Bot locked as resolved and limited conversation to collaborators Aug 11, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants