Open domesticmouse opened 4 years ago
OffsetLayer.toImage
is not supported on the Web, but we should provide a much better error message.
@domesticmouse would you be interested in fixing the error message in a PR that tells developers that this is not currently supported?
I’m currently in I/O crunch, so I’m happy to look at this, but it’ll be a month or two before I have time.
Is there any updates on this ? This feature would be much useful if it runs on web.
I am getting
Exception: Incorrect sequence of push/pop operations while building scene surfaces. After building the scene the persisted surface stack must contain a single element which corresponds to the scene itself (_PersistedScene). All other surfaces should have been popped off the stack. Found the following surfaces in the stack:
PersistedScene, PersistedTransform
══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during a scheduler callback:
Assertion failed:
org-dartlang-sdk:///flutter_web_sdk/lib/_engine/engine/surface/scene_builder.dart:267:12
retainedSurface.isActive || retainedSurface.isReleased
is not true
is there any solution to screenshot a widget on the web
Also looking for a solution to take a screenshot of widgets on flutter web.
Also looking for a solution to take a screenshot of widgets on flutter web.
I think this might help you this flutter example from @rxlabz allows you to save your canvas as a png image live on the web here and you can find the source code here
@maheshmnj with the slight problem, unfortunately, that it isn't a ui.Canvas
but a html.CanvasElement
. A horse of a different color...
@yjbanov Yegor, judging by the labels and commits, you might be the most active player in this area. :-)
I have identified and collected four errors (some actually fork into two being different problems on DomCanvas and CanvasKit) that, although separate errors, all belong to the same group of picture manipulation, this one being one of them. All of them are such showstoppers for me that I started to delve into the engine, trying to fix myself. (All of them are reported here, by the way.)
Just to recap:
Picture
> Image
doesn't work, this means that Canvas/Scene
to Image
isn't working, either. As noted above, Scene
might be misleading to think that the priority is low because only people needing to take snapshots of widgets are affected but this isn't true. Canvas
is the only way to do persistent picture manipulation (by persistent I mean not just for display but saved, exported, uploaded in any way). Fixing Picture
> Image
will cure them all at the same time.
Image.toByteData()
doesn't work, actually two problems because neither DomCanvas nor CanvasKit works and these are two different problems. I'm still trying to tackle this.
instantiateImageCodec(width)
doesn't work, although this could be worked around (with some pain) if the first item worked.
Is there any way to have a few messages about these (eg. I think Ifound what's actually missing for the first to work but I don't know if it would be ever included or replaced with another functionality on the web), maybe out of band? Just to see if these (or anything that lies behind these errors) are being worked on actively and if there's anything to be had by us trying to work on them, too.
@yjbanov I fixed the first problem, Picture/Canvas toImage()
already works for me. The required changes are rather simple, a few lines here and there. In CanvasKit, it seems just perfect, in DomCanvas I had to remove something that you might need in other scenarios (there is a comment to that effect). I'm actually only really interested in CanvasKit now but I wanted to take care of the other one, too.
I'll move on with the second problem but it would be nice to be able to show you the fix.
Verified and replicable on latest master and get below error message:
https://github.com/flutter/photobooth I think this is a good example
Reproducible on the latest versions of flutter.
Error: Assertion failed: org-dartlang-sdk:///lib/_engine/engine/html/scene_builder.dart:94:16
matrix4[0] == EngineFlutterDisplay.instance.devicePixelRatio &&
matrix4[5] == EngineFlutterDisplay.instance.devicePixelRatio
is not true
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 296:3 throw_
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 29:3 assertFailed
lib/_engine/engine/html/scene_builder.dart 95:57 pushTransform
packages/flutter/src/rendering/layer.dart 1525:12 [_createSceneForImage]
packages/flutter/src/rendering/layer.dart 1549:28 toImage
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5 _async
packages/flutter/src/rendering/layer.dart 1548:27 toImage
packages/flutter/src/rendering/proxy_box.dart 3357:23 toImage
packages/xst/main.dart 42:38 _incrementCounter
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5 _async
packages/xst/main.dart 39:25 [_incrementCounter]
packages/flutter/src/material/ink_well.dart 1171:21 handleTap
packages/flutter/src/gestures/recognizer.dart 315:24 invokeCallback
packages/flutter/src/gestures/tap.dart 652:11 handleTapUp
packages/flutter/src/gestures/tap.dart 309:5 [_checkUp]
packages/flutter/src/gestures/tap.dart 242:7 handlePrimaryPointer
packages/flutter/src/gestures/recognizer.dart 667:9 handleEvent
packages/flutter/src/gestures/pointer_router.dart 98:7 [_dispatch]
packages/flutter/src/gestures/pointer_router.dart 143:9 <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/linked_hash_map.dart 21:7 forEach
packages/flutter/src/gestures/pointer_router.dart 141:17 [_dispatchEventToRoutes]
packages/flutter/src/gestures/pointer_router.dart 127:7 route
packages/flutter/src/gestures/binding.dart 495:5 handleEvent
packages/flutter/src/gestures/binding.dart 475:14 dispatchEvent
packages/flutter/src/rendering/binding.dart 425:11 dispatchEvent
packages/flutter/src/gestures/binding.dart 420:7 [_handlePointerEventImmediately]
packages/flutter/src/gestures/binding.dart 383:5 handlePointerEvent
packages/flutter/src/gestures/binding.dart 330:7 [_flushPointerEventQueue]
packages/flutter/src/gestures/binding.dart 299:9 [_handlePointerDataPacket]
lib/_engine/engine/platform_dispatcher.dart 1418:5 invoke1
lib/_engine/engine/platform_dispatcher.dart 332:5 invokeOnPointerDataPacket
lib/_engine/engine/pointer_binding.dart 398:30 [_sendToFramework]
lib/_engine/engine/pointer_binding.dart 224:7 onPointerData
lib/_engine/engine/pointer_binding.dart 1001:20 <fn>
lib/_engine/engine/pointer_binding.dart 930:7 <fn>
lib/_engine/engine/pointer_binding.dart 531:9 loggedHandler
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 426:37 _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 431:39 dcall
I'm attempting to convert a Canvas widget's content to an image, using the following code. It works fine on iOS and macOS, but dies on the web.
VSCode console output:
JS Console stacktrace