NativeScript 插件 - FilePhotoView

用于在Android上从本地存储查看图片文件的一个简单库。

此插件仅支持Android。对于iOS，建议使用nativescript-photoview插件。

背景

我有一个应用程序，它从受保护的REST API端点读取图片，并将其作为ImageSource下载到NativeScript。我需要一个图片查看器，当点击缩略图时，图片查看器将显示并具有缩放功能。

所以我需要一个支持NS的ImageSource的图片弹出查看器。我发现nativescript-photoviewer在这方面工作得很好，但它仅支持Android的外部URL字符串，我无法提供。

我还发现，直接将ImageSource传递给Android库并不是非常严格（它容易导致内存溢出错误）。

因此，我提出了一种简单的方法，如下所示

• 图片以NS的ImageSource实例形式下载
• 当用户点击缩略图时，ImageSource将保存到应用程序缓存中
• 图片文件路径将传递给上面的FilePhotoView Android库以弹出和显示
  • FilePhotoView在幕后使用Glide和PhotoView

安装

在项目的根目录中运行 tns plugin add nativescript-file-photoview。

使用方法

使用方法非常简单。导入 "nativescript-file-photoview" 模块并创建其实例。调用 show(string) 函数（字符串是本地存储的图片文件路径）来显示图片。 show() 函数接受一个单参数，即字符串。

import { Component, OnInit } from "@angular/core";
import { Observable } from 'rxjs/Rx';
import * as nshttp from 'http';
import * as fs from 'file-system';
import * as enums from 'ui/enums';

// Import the plugin
import { FilePhotoview } from 'nativescript-file-photoview';

@Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
})
export class AppComponent implements OnInit { 

    imageUrl: string;

    filePhotoView = new FilePhotoview();

    ngOnInit() {

        this.imageUrl = 'https://controller1.skywidesoft.com/images/sample1.jpg';

    }

    viewPhoto() {
        console.log('View Photo');
        console.log(`imageUrl: ${this.imageUrl}`);

        // Download image and save file to application cache
        Observable.from(nshttp.getImage(this.imageUrl)).subscribe(
            image => {

                // This is the application's cache folder
                let folder = fs.knownFolders.temp();

                // Construct a unique file name for saving the image file
                let fileName = new Date().getTime() + '.jpg';
                let path = fs.path.join(folder.path, fileName);

                // Save the file
                image.saveToFile(path, enums.ImageFormat.jpg);
                console.log(`File: ${path} saved successfully`);

                // Display the photo
                this.filePhotoView.show(path);

            }
        );
    }

}

屏幕截图

帮助

我将接受改进此项目的pull请求，并分配信用。所有代码均为Apache 2.0许可。

许可

版权所有 2017 SkywideSoft

根据Apache许可证版本2.0（“许可证”）许可；除非适用法律要求或经书面同意，否则不得使用此文件，除非符合许可证。您可以在以下位置获取许可证副本：

https://apache.ac.cn/licenses/LICENSE-2.0

除非适用法律要求或经书面同意，否则在许可证下分发的软件按“原样”提供，不提供任何明示或暗示的保证或条件。有关许可证的具体语言管理权限和限制，请参阅许可证。