search

xclud / flutter_crop

Crop any widget/image in Android, iOS, Web and Desktop with fancy and customizable UI, in pure Dart code.
https://pub.dev/packages/crop
MIT License
259 stars 84 forks source link

[web/mobile] Unsupported operation: toImage is not supported on the Web #67

Closed ctapp1 closed 3 years ago

ctapp1 commented 3 years ago

Only on web mobile (chrome and safari) am I getting "Unsupported operation: toImage is not supported on the Web", when I try to crop.

This works fine on chrome for my pc, which is interesting.

Any chance on how soon this can be fixed? Love your package so far works great besides this.

xclud commented 3 years ago

@ctapp1 you need to build with flutter build web --dart-define=FLUTTER_WEB_USE_SKIA=true. Otherwise flutter will switch back and forth between DOM and Skia.

Please let me know if this fixes the problem.

kaumudpa commented 3 years ago

@xclud The solution you provided is not working. Even the example app is not working on web mobile (chrome and safari) .

xclud commented 3 years ago

Do this link work?

https://xclud.github.io/flutter_crop/

kaumudpa commented 3 years ago

@xclud Yes the link works and i am still unable to figure out how?

Try this link, I made a build from your example app and uploaded to FB :

https://skiatest.web.app

This works fine while using from Chrome/ Safari from desktop. But it doesn't work on Chrome/Safari on Mobile Phones.

kaumudpa commented 3 years ago

@xclud 


main.dart.js:3760 Uncaught Unsupported operation: toImage is not supported on the Web
    at Object.b (https://skiatest.web.app/main.dart.js:3760:3)
    at ot.lg (https://skiatest.web.app/main.dart.js:22435:26)
    at https://skiatest.web.app/main.dart.js:43188:15
    at a4A.a (https://skiatest.web.app/main.dart.js:5344:71)
    at a4A.$2 (https://skiatest.web.app/main.dart.js:29214:23)
    at Object.a1 (https://skiatest.web.app/main.dart.js:5330:20)
    at i4.a1r (https://skiatest.web.app/main.dart.js:43204:10)
    at i4.rr (https://skiatest.web.app/main.dart.js:43175:30)
    at vB.R9 (https://skiatest.web.app/main.dart.js:34060:10)
    at Object.eval (eval at aa2 (https://skiatest.web.app/main.dart.js:3904:8), <anonymous>:3:37)
kaumudpa commented 3 years ago

@xclud Were you able to reproduce this issue? Any Luck?

xclud commented 3 years ago

Can you paste the output of flutter doctor -v ? I am suspecting if it's your flutter version.

kaumudpa commented 3 years ago

@xclud

here you go.


 [✓] Flutter (Channel stable, 2.2.2, on macOS 11.4 20F71 darwin-x64, locale en-IN)
    • Flutter version 2.2.2 at /Users/abc/flutter
    • Framework revision d79295af24 (11 days ago), 2021-06-11 08:56:01 -0700
    • Engine revision 91c9fc8fe0
    • Dart version 2.13.3

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/abc/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5, Build version 12E262
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.2)
    • 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 11.0.8+10-b944.6916264)

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 11.4 20F71 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 91.0.4472.114
kaumudpa commented 3 years ago

@xclud You want me to check on other flutter version's too?

xclud commented 3 years ago

I am confused. Your link does not work on my Android phone. I will try to figure this out and will let you know.

xclud commented 3 years ago

BTW, how about flutter build web --web-renderer canvaskit? Can you update the link?

kaumudpa commented 3 years ago

BTW, how about flutter build web --web-renderer canvaskit? Can you update the link?

Ok it looks like its working with this.

xclud commented 3 years ago

Thank for your feedback. I am closing this issue but please open a new one any time.

kaumudpa commented 2 years ago

@xclud This is now not working on safari on mac os and ios 15.

Venali2233 commented 5 months ago

感谢您的反馈。我将关闭此问题，但请随时打开一个新问题。

April 3, 2024, I have the same problem, still mobile web is not supported, but pc web is supported, I need to use the screenshot: //final Uint8List? imageFile = await _controller.capture();
but in capture() contains toimage The mobile web doesn't do it, but all other devices do!