hnvn / flutter_image_cropper

A Flutter plugin for Android and iOS supports cropping images
971 stars 374 forks source link

Unsupported operation: _Namespace : getting this error on web #335

Open am1tr0r opened 2 years ago

am1tr0r commented 2 years ago

Error: Unsupported operation: Namespace at Object.throw [as throw] (http://localhost:55543/dart_sdk.js:5067:11) at Function.get _namespacePointer [as _namespacePointer] (http://localhost:55543/dart_sdk.js:56707:17) at Function._namespacePointer (http://localhost:55543/dart_sdk.js:54523:28) at Function._dispatchWithNamespace (http://localhost:55543/dart_sdk.js:54526:31) at io._File.new.length (http://localhost:55543/dart_sdk.js:54649:23) at imageCompress (http://localhost:55543/packages/agendaboa/utils/image_compress.dart.lib.js:86:29) at imageCompress.next () at runBody (http://localhost:55543/dart_sdk.js:40590:34) at Object._async [as async] (http://localhost:55543/dart_sdk.js:40621:7) at imageCompress (http://localhost:55543/packages/agendaboa/utils/image_compress.dart.lib.js:83:18) at compute (http://localhost:55543/packages/flutter/src/foundation/_isolates_web.dart.lib.js:28:14) at compute.next () at http://localhost:55543/dart_sdk.js:40571:33 at _RootZone.runUnary (http://localhost:55543/dart_sdk.js:40441:59) at _FutureListener.thenAwait.handleValue (http://localhost:55543/dart_sdk.js:35363:29) at handleValueCallback (http://localhost:55543/dart_sdk.js:35931:49) at Function._propagateToListeners (http://localhost:55543/dart_sdk.js:35969:17) at async._AsyncCallbackEntry.new.callback (http://localhost:55543/dart_sdk.js:35698:27) at Object._microtaskLoop (http://localhost:55543/dart_sdk.js:40708:13) at _startMicrotaskLoop (http://localhost:55543/dart_sdk.js:40714:13) at http://localhost:55543/dart_sdk.js:36191:9

on web, app get stuck here on completer function with the error mentioned above

/// Creates a completer for the given JS promise. Completer _completerForPromise(Promise promise) { Completer out = Completer();

// Create interopts for promise promise.then(allowInterop((value) { out.complete(value); }), allowInterop(([value]) { out.completeError(value, StackTrace.current); }));

return out; }

hnvn commented 2 years ago

Look like this #334

am1tr0r commented 2 years ago

@hnvn I think this is because of the type of image file path in web. I am not able to upload the image file to firebase storage in web if path is like this .(Note : on mobiles I am able to upload because paths are not of this kind(blob)) blob:http://localhost:62886/e9b451d1-61eb-4964-8d6b-53f3010d12e9

secondly on web , when I try to open an image from cache whose path is /.tmp_rand0/cacherand0/8fa428c0-d128-11ec-ac29-7df3657f842d.bin then image cropper does't display the image in cropper.

Screen Shot 2022-05-11 at 6 20 20 PM

if path is like this blob:http://localhost:62886/e9b451d1-61eb-4964-8d6b-53f3010d12e9 then image cropper displays the image.

hnvn commented 2 years ago

Web is another world, you don't work with files directly, instead you work with a "binary" version of that file (called BLOB), see this for more detail

am1tr0r commented 2 years ago

so I have to use this for web?. or can we use image_picker 2.0.2 after making some changes in it.

hnvn commented 2 years ago

You have to convert you file into BLOB format, provide it to ImageCropper in an URI like blob:....

am1tr0r commented 2 years ago

yes I have been trying to find a way to convert file to BLOB format and vice a versa (BLOB format to File). but could't find a solution yet. it would be great for me if you could help. Thanks

hnvn commented 2 years ago

What is your scenario? where does your input data for ImageCropper come from?

am1tr0r commented 2 years ago

my data to ImageCropper come from a firebase image url and after cropping image also I am saving it into firebase storage.

hnvn commented 2 years ago

Do something like this:

Blob myBlob = Blob(await file.readAsBytes());

Note that Blob object come from html package, so it is only available for web

am1tr0r commented 2 years ago

but this myBlob will be an object of Blob, how we Get a path from it to pass in ImageCropper. because Blob object does't returns path it has only type of blob, size and slice.

hnvn commented 2 years ago
html.Url.createObjectUrl(myBlob);
am1tr0r commented 2 years ago

Thanks finally I got the path(blob url path : blob:http://localhost:60379/7ce38fe2-465c-4222-b64c-cee13e2c8608). but still I have white screen , I am not sure why.

Is there a way to get the simple File from this type of path (blob url path : blob:http://localhost:60379/7ce38fe2-465c-4222-b64c-cee13e2c8608), file that I want to upload to firebase?

am1tr0r commented 2 years ago

here we need to put the await file.readAsBytes() in an array , then it works.

like this : html.Blob blob = html.Blob([await logo.readAsBytes()]);

am1tr0r commented 2 years ago

Is there a way to get the simple File from this type of path (blob url path : blob:http://localhost:60379/7ce38fe2-465c-4222-b64c-cee13e2c8608), this is the File that I want to upload to firebase, I need to get it from blob url.

Aqua-Ye commented 1 year ago

You can try this package: https://pub.dev/packages/cross_file