Usage on web

[SeriousMonk]

Hi, I am currently getting the following error:

UnimplementedError: structured clone of other type

I am calling the JsIsolatedWorker like this:

cropped = Uint8List.fromList(await JsIsolatedWorker().run(
        functionName: 'cropImageDataWithDartLibrary',
        arguments: editorKey.currentState!
)

and this is the function I am trying to run in the worker:

Future<Uint8List?> cropImageDataWithDartLibrary(
      ExtendedImageEditorState state) async {
    print('dart library start cropping');

    ///crop rect base on raw image
    final Rect? cropRect = state.getCropRect();

    print('getCropRect : $cropRect');

    final Uint8List data = state.rawImageData;

    final EditActionDetails editAction = state.editAction!;

    final DateTime time1 = DateTime.now();

    img.Image? src = await compute(img.decodeImage, data);

    List<int>? fileData;
    if(src != null){
      final DateTime time2 = DateTime.now();
      //clear orientation
      src = img.bakeOrientation(src);

      if (editAction.needCrop) {
        src = img.copyCrop(src, cropRect!.left.toInt(), cropRect.top.toInt(),
            cropRect.width.toInt(), cropRect.height.toInt());
      }

      if (editAction.needFlip) {
        late img.Flip mode;
        if (editAction.flipY && editAction.flipX) {
          mode = img.Flip.both;
        } else if (editAction.flipY) {
          mode = img.Flip.horizontal;
        } else if (editAction.flipX) {
          mode = img.Flip.vertical;
        }
        src = img.flip(src, mode);
      }

      if (editAction.hasRotateAngle) {
        src = img.copyRotate(src, editAction.rotateAngle);
      }
      final DateTime time3 = DateTime.now();
      print('${time3.difference(time2)} : crop/flip/rotate');

      print('start encode');
      final DateTime time4 = DateTime.now();

      fileData = await compute(img.encodeJpg, src);

      final DateTime time5 = DateTime.now();
      print('${time5.difference(time4)} : encode');
      print('${time5.difference(time1)} : total time');
    }
    return Uint8List.fromList(fileData!);
  }

I probably didn't understand how this package is supposed to be used on web; could you point me in the right direction?

[SeriousMonk]

Oh I see, does the function need to be written in js and imported from a js file?

[iandis]

Hello thank you for your feedback. First of all, one of the limitations of JsIsolatedWorker is that it cannot consume Dart closures (functions). So in order for it to work properly, we need existing native JavaScript closures/functions, either provided by the browser (e.g. JSON.stringify) or by users. If users provide their own JS functions in a file, it is mandatory to import the files first using JsIsolatedWorker.importScripts.

Lastly, I forgot to put a side note at the end of the README that users need to download worker.js and put it on their web folder in order for JsIsolatedWorker to work properly.

I hope that answers your confusion😄

[SeriousMonk]

Thank you for the quick reply! So to run that dart function I included in the issue would be impossible using this package? I would have to somehow obtain the same result of that dart function but in javascript?

[iandis]

Yes, that is correct, at least for now

[SeriousMonk]

Okay thank you very much for your help :)