w/ "--web-renderer=html" Crop fails: `Unsupported operation: toImage is not supported on the Web`

[bartonhammond]

I am using --dart-define=FLUTTER_WEB_USE_SKIA=true, on the Master channel and Crop works fine. But due to another requirement, I have to add the flag --web-renderer=html. With that additional flag, Crop fails.

Would you have any idea of a work around?

Here's my launch.json configuration

  {
      "name": "Chrome SKIA Dev",
      "request": "launch",
      "type": "dart",
      "program": "lib/main_web_dev.dart",
      "args": [
        "-d",
        "chrome",
        "--dart-define=FLUTTER_WEB_USE_SKIA=true",
        "--web-renderer=html"
      ]
    },

Here's the stack

Error: Unsupported operation: toImage is not supported on the Web
    at Object.throw_ [as throw] (http://localhost:65382/dart_sdk.js:4351:11)
    at _engine.SurfaceScene.new.toImage (http://localhost:65382/dart_sdk.js:158747:17)
    at layer$.OffsetLayer.new.toImage (http://localhost:65382/packages/flutter/src/rendering/layer.dart.lib.js:1636:30)
    at toImage.next (<anonymous>)
    at runBody (http://localhost:65382/dart_sdk.js:37988:34)
    at Object._async [as async] (http://localhost:65382/dart_sdk.js:38019:7)
    at layer$.OffsetLayer.new.toImage (http://localhost:65382/packages/flutter/src/rendering/layer.dart.lib.js:1627:20)
    at proxy_box.RenderRepaintBoundary.new.toImage (http://localhost:65382/packages/flutter/src/rendering/proxy_box.dart.lib.js:3355:26)
    at ui$._CropState.new.[_crop] (http://localhost:65382/packages/crop/src/ui.dart.lib.js:715:18)
    at ui$.CropController.new.crop (http://localhost:65382/packages/crop/src/ui.dart.lib.js:977:33)
    at crop_widget._CropWidgetPageState.new._cropImage (http://localhost:65382/packages/MyFamilyVoice/web/crop_widget.dart.lib.js:1712:46)
    at _cropImage.next (<anonymous>)
    at runBody (http://localhost:65382/dart_sdk.js:37988:34)
    at Object._async [as async] (http://localhost:65382/dart_sdk.js:38019:7)
    at crop_widget._CropWidgetPageState.new.[_cropImage] (http://localhost:65382/packages/MyFamilyVoice/web/crop_widget.dart.lib.js:1709:20)
    at ink_well._InkResponseState.new.[_handleTap] (http://localhost:65382/packages/flutter/src/material/icon_button.dart.lib.js:51085:42)
    at tap.TapGestureRecognizer.new.invokeCallback (http://localhost:65382/packages/flutter/src/gestures/recognizer.dart.lib.js:189:18)
    at tap.TapGestureRecognizer.new.handleTapUp (http://localhost:65382/packages/flutter/src/gestures/tap.dart.lib.js:395:40)
    at tap.TapGestureRecognizer.new.[_checkUp] (http://localhost:65382/packages/flutter/src/gestures/tap.dart.lib.js:201:12)
    at tap.TapGestureRecognizer.new.acceptGesture (http://localhost:65382/packages/flutter/src/gestures/tap.dart.lib.js:178:23)
    at arena.GestureArenaManager.new.sweep (http://localhost:65382/packages/flutter/src/gestures/arena.dart.lib.js:208:31)
    at binding$5.WidgetsFlutterBinding.new.handleEvent (http://localhost:65382/packages/flutter/src/gestures/binding.dart.lib.js:318:27)
    at binding$5.WidgetsFlutterBinding.new.dispatchEvent (http://localhost:65382/packages/flutter/src/gestures/binding.dart.lib.js:297:24)
    at binding$5.WidgetsFlutterBinding.new.dispatchEvent (http://localhost:65382/packages/flutter/src/rendering/layer.dart.lib.js:6093:13)
    at binding$5.WidgetsFlutterBinding.new.[_handlePointerEventImmediately] (http://localhost:65382/packages/flutter/src/gestures/binding.dart.lib.js:268:14)
    at binding$5.WidgetsFlutterBinding.new.handlePointerEvent (http://localhost:65382/packages/flutter/src/gestures/binding.dart.lib.js:241:43)
    at binding$5.WidgetsFlutterBinding.new.[_flushPointerEventQueue] (http://localhost:65382/packages/flutter/src/gestures/binding.dart.lib.js:230:14)
    at binding$5.WidgetsFlutterBinding.new.[_handlePointerDataPacket] (http://localhost:65382/packages/flutter/src/gestures/binding.dart.lib.js:220:65)
    at Object.invoke1 (http://localhost:65382/dart_sdk.js:178716:7)
    at _engine.EnginePlatformDispatcher.__.invokeOnPointerDataPacket (http://localhost:65382/dart_sdk.js:161367:15)
    at _engine.PointerBinding.__.[_onPointerData] (http://localhost:65382/dart_sdk.js:162002:49)
    at http://localhost:65382/dart_sdk.js:162435:26
    at http://localhost:65382/dart_sdk.js:162394:16
    at http://localhost:65382/dart_sdk.js:162102:11
Application finished.

Here's doctor:

flutter doctor -v
[✓] Flutter (Channel master, 1.25.0-5.0.pre.57, on macOS 11.0.1 20B29 darwin-x64, locale en-US)
    • Flutter version 1.25.0-5.0.pre.57 at /Users/bartonhammond/tools/flutter
    • Framework revision b358854172 (18 hours ago), 2020-12-03 22:41:37 +0100
    • Engine revision 20caf54969
    • Dart version 2.12.0 (build 2.12.0-76.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/bartonhammond/Library/Android/sdk
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.1, Build version 12A7403
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.51.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.16.0

[✓] Connected device (2 available)
    • iPhone SE (2nd generation) (mobile) • 5D61B4C3-F813-4E6D-BD30-D9A81F0C867C • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-1 (simulator)
    • Chrome (web)                        • chrome                               • web-javascript • Google Chrome 87.0.4280.88

• No issues found!

[xclud]

@bartonhammond I am not able to find the documentation for --web-renderer=html. Could you provide a link to the docs? I guess this flag contradicts canvaskit usage.

[bartonhammond]

I don't know about any docs - I found the option here.

https://github.com/flutter/flutter/blob/c92cc25830d3f0daeec8b0d35308c448c635995d/packages/flutter_tools/lib/src/runner/flutter_command.dart#L134

[xclud]

Line 146 in above code, sets FLUTTER_WEB_USE_SKIA to false. Why do you need this flag?

[bartonhammond]

I'm using easy_web_view package to show my landing page which is written in html. W/o the web-renderer, the page can't be scrolled or interacted with - the links, for example, don't work. So with this web-renderer set to html, the embedded landing page works correctly but then I can't crop pictures later. If there was a way to toggle that switch that would be great.

On Fri, Dec 4, 2020 at 10:18 AM Mahdi notifications@github.com wrote:

Line 146 in above code, sets FLUTTER_WEB_USE_SKIA to false. Why do you need this flag?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/xclud/flutter_crop/issues/46#issuecomment-738873899, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJZCPES3GSUYQRF3L25BL3STEDWTANCNFSM4UNSDODQ .

[xclud]

I will try to find a work around this problem. Meantime, can you provide some code for testing? attaching here or a repo link is good.

[bartonhammond]

Ok. Also, if you flutter run --help includes:

 --web-renderer                                    The renderer
                                                      implementation to use when
                                                      building for the web.
                                                      Possible values are:
                                                      html - always use the HTML
                                                      renderer. This renderer
                                                      uses a combination of
                                                      HTML, CSS, SVG, 2D Canvas,
                                                      and WebGL. This is the
                                                      default.
                                                      canvaskit - always use the
                                                      CanvasKit renderer. This
                                                      renderer uses WebGL and
                                                      WebAssembly to render
                                                      graphics.
                                                      auto - use the HTML
                                                      renderer on mobile
                                                      devices, and CanvasKit on
                                                      desktop devices.
                                                      [auto, canvaskit, html
                                                      (default)]

[bartonhammond]

Here's a repo w/ both flutter_crop and easy_web_view. See the README for instructions

https://github.com/bartonhammond/crop_easy_web_view

Thanks!

[bartonhammond]

See https://github.com/flutter/flutter/issues/64092 See https://docs.google.com/document/d/1aY0iU16wf_sdT7nwfpjgT-IatHNfF3slTiYHKmxcIog/edit

[alsiPanda]

I am getting the same error, on flutter web. Here is the error log -

Uncaught (in promise) Error: Unsupported operation: toImage is not supported on the Web at Object.throw_ [as throw] (errors.dart:216) at _engine.SurfaceScene.new.toImage (scene.dart:20) at layer$.OffsetLayer.new.toImage (layer.dart:1206) at toImage.next () at runBody (async_patch.dart:84) at Object._async [as async] (async_patch.dart:123) at layer$.OffsetLayer.new.toImage (layer.dart:1190) at proxy_box.RenderRepaintBoundary.new.toImage (proxy_box.dart:3093) at ui$._CropState.new.[_crop] (ui.dart:80) at ui$.CropController.new.crop (ui.dart:409) at new_image_cropper._OBImageCropperState.new._cropImage (new_image_cropper.dart:43) at _cropImage.next () at runBody (async_patch.dart:84) at Object._async [as async] (async_patch.dart:123) at new_image_cropper._OBImageCropperState.new.[_cropImage] (new_image_cropper.dart:39) at ink_well._InkResponseState.new.[_handleTap] (ink_well.dart:990) at tap.TapGestureRecognizer.new.invokeCallback (recognizer.dart:183) at tap.TapGestureRecognizer.new.handleTapUp (tap.dart:598) at tap.TapGestureRecognizer.new.[_checkUp] (tap.dart:287) at tap.TapGestureRecognizer.new.acceptGesture (tap.dart:259) at arena.GestureArenaManager.new.sweep (arena.dart:157) at binding$5.WidgetsFlutterBinding.new.handleEvent (binding.dart:385) at binding$5.WidgetsFlutterBinding.new.dispatchEvent (binding.dart:361) at binding$5.WidgetsFlutterBinding.new.dispatchEvent (binding.dart:279) at binding$5.WidgetsFlutterBinding.new.[_handlePointerEventImmediately] (binding.dart:316) at binding$5.WidgetsFlutterBinding.new.handlePointerEvent (binding.dart:280) at binding$5.WidgetsFlutterBinding.new.[_flushPointerEventQueue] (binding.dart:238) at binding$5.WidgetsFlutterBinding.new.[_handlePointerDataPacket] (binding.dart:221) at _rootRunUnary (zone.dart:1202) at async._CustomZone.new.runUnary (zone.dart:1097) at async._CustomZone.new.runUnaryGuarded (zone.dart:1002) at Object.invoke1 (platform_dispatcher.dart:913) at _engine.EnginePlatformDispatcher..invokeOnPointerDataPacket (platform_dispatcher.dart:170) at _engine.PointerBinding..[_onPointerData] (pointer_binding.dart:128) at pointer_binding.dart:525 at pointer_binding.dart:486 at pointer_binding.dart:208

My code is mostly same as the one in example, except the _cropImage function -

    void _cropImage() async {
        final pixelRatio = MediaQuery.of(context) .devicePixelRatio;
        final ui.Image croppedImage = await controller.crop(pixelRatio: pixelRatio);
        ByteData data = await croppedImage.toByteData();
        final buffer = data.buffer;
        Uint8List imgList = buffer.asUint8List(data.offsetInBytes, data.lengthInBytes);
        cropped = PlatformFile(bytes: imgList, name: widget.name);
        Navigator.pop(context, {'croppedImage': cropped});
     }

[xclud]

@alsiPanda

See #51.