如何在 Nativescript 中使用 MediaFilePicker 和 PhotoEditor 插件

Question

我正在尝试在 nativescript 上使用 MediaFilePicker，同时使用 PhotoEditor 插件 crop/edit 从相机拍摄的照片，但我没有让它工作...这是我的一部分代码：

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();
         });
     });
 });

FilePicker 的结果对象如下：

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

我相信如果照片是从相机拍摄的，那么使用 rawData 字段，但我不知道是哪种格式，以及如何将它提供给 PhotoEditor 插件来玩。

有什么建议吗？

谢谢！

Answer 1

问题出在 source.fromAsset(result.rawData) 行，result.rawData 不是 ImageAsset，而是 PHAsset。您必须从 PHAsset 创建一个 ImageAsset 并将其传递给 fromAsset。所以它看起来像，

         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();
            });
        });

如何在 Nativescript 中使用 MediaFilePicker 和 PhotoEditor 插件

How use MediaFilePicker and PhotoEditor plugins in Nativescript

filepicker

nativescript

nativescript-angular