@nativescript/imagepicker

内容

简介
安装
- Android 所需权限
- iOS 所需权限
选择图片
- 演示
API

简介

支持单选和复选的 Imagepicker 插件。

插件支持 iOS8+ 并使用 QBImagePicker Cocoapod。
对于 Android，它使用 Intents 打开内置图片或文件选择器。对于 Android 6 (API 23) 及以上版本，应显式要求读取文件存储权限。

安装

通过在您的应用根目录中运行以下命令安装插件。

npm install @nativescript/imagepicker

注意：版本 3.0 包含破坏性更改

authorize() 现在对于 android 和 ios 都返回一个 Promise<AuthorizationResult>。
在 present() 的返回结果中，每个 result[i].thumbnail 现在是一个 ImageSource。
result[i].duration 现在正确地被类型化为一个 number。

注意：版本 2.0 包含破坏性更改。为了提供有关您选择的信息，ImageSource 资产嵌套在响应中，因此您需要更新代码以使用 result.asset 而不是 result 作为您图像的 src。

Android 所需权限

将以下权限添加到 App_Resources/Android/src/main/AndroidManifest.xml 文件中

targetSdkVersion < 33

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

<application android:requestLegacyExternalStorage="true" ... >
    ...
  </application>

targetSdkVersion >=33(Android 13+)

<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />

<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />

在此处查看完整示例 https://github.com/NativeScript/plugins/blob/main/tools/assets/App_Resources/Android/src/main/AndroidManifest.xml#L14

iOS 所需权限

在 iOS 上使用此插件需要 NSPhotoLibraryUsageDescription 权限。修改 app/App_Resources/iOS/Info.plist 文件以添加它如下

<key>NSPhotoLibraryUsageDescription</key>
<string>Description text goes here</string>

如果您的应用未说明为何需要此权限，Apple App Store 可能会拒绝您的应用。默认消息 需要访问照片库。 可能不足以满足 App Store 审查员的要求。

选择图片

要使用插件选择图片（以及/或视频），请按照以下步骤操作

导入插件

import * as imagePickerPlugin from "@nativescript/imagepicker";

通过选择模式实例化选择器

通过调用插件的 create 函数并以指定媒体资产选择模式（single 或 multiple）的对象传递给它来通过选择模式实例化选择器。

let imagePickerObj: ImagePicker = imagePickerPlugin.create({
    mode: "single"});

选择图片

请求权限通过调用异步的 authorize 方法请求访问照片库的权限。
显示媒体资产列表如果授权请求的 Promise 已解决（即用户已授予权限），则通过调用 present 方法显示要从中选择的媒体资产列表。
处理选择 present 方法使用所选媒体资产解决，您可以对这些资产进行处理和消费。

imagePickerObj
    .authorize()
    .then((authResult) => {
        if(authResult.authorized) {
            return imagePickerObj.present()
                .then(function(selection) {
                    selection.forEach(function(selected) {
                        this.imageSource = selected.asset;
                        this.type = selected.type;
                        this.filesize = selected.filesize;
                        //etc
                    });
                });
        } else {
            // process authorization not granted.
        }
    })    
    .catch(function (e) {
        // process error
    });

演示

您可以在以下链接中的任何一项在 StackBlitz 上试用此插件

API

ImagePicker 类

提供媒体选择 API 的类。它提供以下方法

方法	返回	描述
`构造函数(options: Options)`	`ImagePicker`	使用可选的`options`参数实例化ImagePicker类。参见选项
`authorize()`	`Promise`	请求所需的权限。在调用`present()`之前调用它。如果授权失败，请考虑通知用户功能将降级。如果已授予权限，返回的`AuthorizationResult`将设置其`authorized`属性为`true`。
`present()`	`Promise`	显示图像选择器UI。
`create(options: Options, hostView: View)`	`ImagePicker`	创建ImagePicker类的实例。可以将`hostView`参数设置为承载图像选择器的视图。用于从模态页面打开选择器时。

选项

传递给create方法的对象，用于指定媒体选择器的特征。

选项	类型	默认	描述
`mode`	`string`	`multiple`	图像选择器的模式。可能的值是`single`表示单选，`multiple`表示多选。
`minimumNumberOfSelection`	`number`	`0`	可选:(`iOS专用`) 选择的最小资产数。
`maximumNumberOfSelection`	`number`	`0`	可选:(`iOS专用`) 选择的资产最大数量。
`showsNumberOfSelectedAssets`	`boolean`	`true`	可选:(`iOS专用`) 显示所选资产的数量。
`prompt`	`string`	`undefined`	可选:(`iOS专用`) 在选择资产时显示提示文本。
`numberOfColumnsInPortrait`	`number`	`4`	可选:(`iOS专用`) 设置Portrait方向中的列数
`numberOfColumnsInLandscape`	`number`	`7`	可选:(`iOS专用`) 设置Landscape方向中的列数。
`mediaType`	ImagePickerMediaType	`Any`	可选: 选择媒体资产类型，是否选择图像/视频/任何类型的资产。
`copyToAppFolder`	`string`	`undefined`	可选: 如果提供，将在您的应用程序文件夹中创建一个新的文件夹，并将资产复制到那里。
`renameFileTo`	`string`	`undefined`	可选: 如果提供，复制的文件将使用您选择的名称命名。如果选择多个，则附加-index。
`showAdvanced`	`boolean`	`false`	可选:(`Android专用`) 在Android上显示内部和可移除存储选项 (警告：非官方支持)。
`android`	`{read_external_storage: string;}`	可选:(`Android专用`) 提供请求访问API级别高于23的外部存储的理由。

ImagePickerMediaType

要选择的媒体资产类型。

Any = 0,
Image = 1,
Video = 2

许可

Apache License Version 2.0