Nativescript如何将图像保存到自定义组件中的文件

Question

我创建了一个自定义组件，该组件可以访问设备的相机以拍摄照片，将其设置为ImageView 的来源，然后将其保存到文件中。 这是Javascript代码

CAMERA.JS

这里是imageView的初始化

export function cameraLoaded(args):void{
    cameraPage = <Page> args.object;
    imageView = <Image> cameraPage.getViewById("img_upload");...
}

这里我将imageViews'source设置为刚刚拍的照片

export function takePicture():void{
    camera.takePicture(
        {
        })
        .then(
            function(picture){
                imageView.imageSource = picture;
        },function(error){
    });
}

这很好用。

现在我尝试将图片保存到文件中。

export function saveToFile():void{

    try {
        let saved = imageView.imageSource.saveToFile(path,enums.ImageFormat.png);
        HalooseLogger.log(saved,"upload");
        })
    }catch (e){
      ...
    }
}

这里出现错误cannot read property saveToFile of undefined 这很不寻常，其实如果我console.log(imageView)这里是输出：

Image<img_upload>@file:///app/views/camera/camera.xml:4:5;

但如果我 console.log(imageView.imageSource) 我看到它是“未定义”。 这怎么可能？我做错了什么？

附加信息 前面的代码和相关的xml包含在另一个视图中如下：

MAIN.XML

<Page 
 xmlns="http://schemas.nativescript.org/tns.xsd"
 xmlns:cameraPage="views/camera" 
 loaded="loaded">
<StackLayout orientation="vertical">
    <StackLayout id="mainContainer">
    <!-- DYNAMIC CONTENT GOES HERE -->
    </StackLayout>
</StackLayout>
</Page>

MAIN.JS

这是动态加载相机视图

export function loaded(args):void{
    mainPage = <Page>args.object;
    contentWrapper = mainPage.getViewById("mainContainer");
 DynamicLoaderService.loadPage(mainPage,contentWrapper,mainViewModel.currentActive);
}

loadPage 方法执行以下操作：

 public static loadPage(pageElement,parentElement,currentActive):void{
        let component = Builder.load({
            path : "views/camera",
            name : "camera",
            page : pageElement
        });
        parentElement.addChild(component);
    } 

Answer 1

问题是，从 NativeScript 2.4.0 开始，为 Android 创建的 Image 将始终为其属性 imageSource 返回 null。目前，正在优化以防止在处理多个大图像时出现内存不足相关问题，这就是 image-asset 出现在 nativeScript 2.4.0 中的原因。

现在我不确定您是否使用最新的 nativescript-camera（强烈推荐），但如果是，您应该考虑 takePicture() 的承诺正在返回 imageAsset。由于内存优化，除非您专门创建一个，否则 imageSource 将始终返回 undefined（适用于 Android）。您可以使用 fromAsset() 方法提供从相机回调返回的 ImageAsset。

例子：

import { EventData } from 'data/observable';
import { Page } from 'ui/page';

import { Image } from "ui/image";
import { ImageSource, fromAsset } from "image-source";
import { ImageAsset } from "image-asset";

import * as camera from "nativescript-camera";
import * as fs from "file-system";

var imageModule = require("ui/image");
var img;
var myImageSource: ImageSource;

// Event handler for Page "navigatingTo" event attached in main-page.xml
export function onLoaded(args: EventData) {
    // Get the event sender
    let page = <Page>args.object;

    img = <Image>page.getViewById("img");

    camera.requestPermissions();
}

export function takePhoto() {
    camera.takePicture()
        .then(imageAsset => {
            console.log("Result is an image asset instance");
            img.src = imageAsset;

            fromAsset(imageAsset).then(res => {
                myImageSource = res;
                console.log(myImageSource);
            })
        }).catch(function (err) {
            console.log("Error -> " + err.message);
        });
}

export function saveToFile(): void {



    var knownPath = fs.knownFolders.documents();
    var folderPath = fs.path.join(knownPath.path, "CosmosDataBank");

    var folder = fs.Folder.fromPath(folderPath);
    var path = fs.path.join(folderPath, "Test.png");

    var saved = myImageSource.saveToFile(path, "png");
    console.log(saved);
}