How use MediaFilePicker and PhotoEditor plugins in Nativescript

Question

I am trying to use MediaFilePicker on nativescript and at the same time use the PhotoEditor plugin to crop/edit the photo taken from the camera but I don't make it work... here is part of my code:

let options: ImagePickerOptions = {
    android: {
        isCaptureMood: true, // if true then camera will open directly.
        isNeedCamera: true,
        maxNumberFiles: 1,
        isNeedFolderList: true
    }, ios: {
        isCaptureMood: true, // if true then camera will open directly.
        maxNumberFiles: 1
    }
 };

 let mediafilepicker = new Mediafilepicker();
 mediafilepicker.openImagePicker(options);

 mediafilepicker.on("getFiles", function (res) {
 let results = res.object.get('results');
 let result = results[0];
 let source = new imageSourceModule.ImageSource();
 source.fromAsset(result.rawData).then((source) => {
     const photoEditor = new PhotoEditor();
     photoEditor.editPhoto({
         imageSource: source,
         hiddenControls: [],
     }).then((newImage) => {            
     }).catch((e) => {
         reject();
         });
     });
 });

The result object of the FilePicker comes like:

{
"type": "capturedImage",
"file": {},
"rawData": "[Circular]"
}

I believe if the picture was taken from the camera, then use the rawData field, but I dont know which format is coming and how to give it to PhotoEditor pluging to play with it.

Any suggestions?

Thanks!

Answer 1

The issue was at this line source.fromAsset(result.rawData) here, result.rawData is not an ImageAsset but it's PHAsset. You will have to create an ImageAsset from PHAsset and pass it on to fromAsset. So it would look like,

         import { ImageAsset } from "tns-core-modules/image-asset";

         ....
         ....
         imgSource.fromAsset(new ImageAsset(img)).then((source) => {
            const photoEditor = new PhotoEditor();
            console.log(source === imgSource);
            photoEditor.editPhoto({
                imageSource: source,
                hiddenControls: [],
            }).then((newImage: ImageSource) => {
                console.log('Get files...');
                // Here you can save newImage, send it to your backend or simply display it in your app

            }).catch((e) => {
                //reject();
            });
        });