首页 文章

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

提问于
浏览 次
1

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

CAMERA.JS

这是imageView的初始化

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

在这里，我将 imageViews '源设置为刚刚拍摄的照片

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 ）我发现它是'未定义的' . How is this possible? What am I doing wrong?

ADDITIONAL INFO 上一个代码和relatedx 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);
    }
nativescript

1 回答

  • 3

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

    现在我不确定你是否正在使用最新的 nativescript-camera （强烈推荐），但如果是这样你应该考虑takePicture（）的promise是返回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);
}
    回复于

相关问题