NativeScript Camera

欢迎使用 NativeScript 框架的 nativescript-camera 插件

(可选) 先决条件 / 要求

• 已安装 NativeScript-CLI

使用摄像头插件

概述

几乎每个移动应用程序都需要捕获、保存和分享图片的功能。NativeScript 摄像头插件旨在处理这项工作的前两部分（拍照和可选地保存到设备存储）。

安装

导航到项目文件夹并运行 NativeScript-CLI 命令

tns plugin add nativescript-camera

插件可以作为标准 npm 依赖项添加，运行命令

npm install nativescript-camera --save 

注意：使用 --save 标志会将插件添加到 package.json 文件中的依赖项

API

方法

CameraOptions

注意：在Android上，saveToGallery选项可能会出现意外行为！一些厂商的相机应用（例如LG）会将所有捕获的图片保存到相册，不管saveToGallery的值是多少。这种行为无法通过相机插件来控制，如果您必须将捕获的图片从相册中排除，您需要获取本地存储的读写权限，并编写自定义代码来找到相册位置并从那里删除新图片。

用法

请求权限

Android和iOS都需要显式权限，以便应用程序能够访问相机并将照片保存到设备。一旦用户授权了权限，就可以使用相机模块。

camera.requestPermissions().then(
    function success() {
        // permission request accepted or already granted 
        // ... call camera.takePicture here ...
    }, 
    function failure() {
        // permission request rejected
        // ... tell the user ...
    }
);

针对Android的说明：不使用请求权限弹出窗口的较旧版本的Android不会受到使用requestPermissions方法的影响。

针对iOS的说明：如果用户在iOS弹出窗口中拒绝权限，则应用程序不允许再次请求。您可以指示用户前往应用程序设置，并手动从那里启用相机权限。此外，App Store指南5.1.1要求应用程序阐明相册和照片库的使用情况。为此，请编辑您的app/App_Resources/iOS/Info.plist并添加以下说明

<key>NSCameraUsageDescription</key>
<string>enter your camera permission request text here</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>enter your photo library permission request text here</string>

使用相机模块拍照

使用相机模块相对简单。然而，有一些点需要更多的解释。

为了使用相机模块，只需按照示例1中的方式要求它即可

示例1：在应用程序中要求相机模块

// JavaScript
const camera = require("nativescript-camera");

// TypeScript
import * as camera from "nativescript-camera";

然后您就可以使用它了

示例2：如何拍照并接收图像资产

// JavaScript
const imageModule = require("tns-core-modules/ui/image");

camera.takePicture()   
    .then(function (imageAsset) {
        console.log("Result is an image asset instance");
        var image = new imageModule.Image();
        image.src = imageAsset;
    }).catch(function (err) {
        console.log("Error -> " + err.message);
    });

// TypeScript
import { Image } from "tns-core-modules/ui/image";

camera.takePicture()
    .then((imageAsset) => {
        console.log("Result is an image asset instance");
        var image = new Image();
        image.src = imageAsset;
    }).catch((err) => {
        console.log("Error -> " + err.message);
    });

示例2中的代码将启动原生平台相机应用。拍照后，点击按钮保存（Android）或使用图像（iOS），promise将解析then部分，并将图像资产设置为ui/image控件的src。

使用选项来拍摄内存高效的图片

示例2展示了如何使用NativeScript相机模块拍照。然而，它拍摄了一张巨大的图片（即使是中等设备也有500万像素的相机，这意味着图像大小为2580x2048，在位图中的意思是大约15MB）。在许多情况下，您不需要这样大的图片来显示100x100大小的图像，所以拍摄大图片只是浪费内存。camera.takePicture()方法接受一个可选参数，这可以帮助您在这种情况下设置一些属性，例如

• width：图片所需的宽度（以设备独立像素为单位）。
• height：图片所需的高度（以设备独立像素为单位）。
• keepAspectRatio：一个布尔参数，表示是否应保持宽高比。
• saveToGallery：一个布尔参数，表示原始拍摄的图片是否将被保存到Android的“照片”和iOS的“相机胶卷”中。
• allowsEditing：（仅限iOS）一个布尔参数，表示相机“重拍”或“使用照片”屏幕是否强制用户裁剪相机图片为正方形，并可选地允许他们放大。
• cameraFacing：以设备的前置或后置相机（默认）开始。当前实现不适用于所有Android设备，在这种情况下，将回退到默认行为。

什么是设备无关像素？NativeScript布局机制在测量UI控件时使用设备无关像素。这允许您声明一个布局，并且这个布局在所有设备上看起来都相似（无论设备的显示分辨率如何）。为了在高清设备（如iPhone视网膜和Android Full HD）上获得合适的图像质量，相机将返回一个具有更大尺寸的图像。例如，如果我们请求一个100x100的图像，在iPhone 6上实际图像将是200x200（因为其显示密度因子为2 -> 1002x1002）。设置keepAspectRatio属性可能会导致请求的宽度或高度不同。相机将返回一个具有正确宽高比的图像，但通常只有一个（宽度和高度中）会与请求的相同；另一个值将根据原始图像的宽高比进行计算。

示例 3展示了如何使用options参数

示例 3：如何设置相机模块的width、height、keepAspectRatio和saveToGallery属性

// JavaScript
const imageModule = require("tns-core-modules/ui/image");

const options = {
    width: 300,
    height: 300,
    keepAspectRatio: false,
    saveToGallery: true
};

camera.takePicture(options)   
    .then(function (imageAsset) {
        console.log("Size: " + imageAsset.options.width + "x" + imageAsset.options.height);
        console.log("keepAspectRatio: " + imageAsset.options.keepAspectRatio);
        console.log("Photo saved in Photos/Gallery for Android or in Camera Roll for iOS");
    }).catch(function (err) {
        console.log("Error -> " + err.message);
    });

// TypeScript
import { Image } from "tns-core-modules/ui/image";

const options = {
    width: 300,
    height: 300,
    keepAspectRatio: false,
    saveToGallery: true
};

camera.takePicture(options)
    .then((imageAsset) => {
        console.log("Size: " + imageAsset.options.width + "x" + imageAsset.options.height);
        console.log("keepAspectRatio: " + imageAsset.options.keepAspectRatio);
        console.log("Photo saved in Photos/Gallery for Android or in Camera Roll for iOS");
    }).catch((err) => {
        console.log("Error -> " + err.message);
    });

保存图片

要保存一个宽度 & 高度由您定义的图片，您必须使用imageAsset并将其保存到文件系统，如下所示

const source = new ImageSource();

source.fromAsset(imageAsset)
    .then((imageSource: ImageSource) => {
        const folderPath: string = knownFolders.documents().path;
        const fileName: string = "test.jpg";
        const filePath: string = path.join(folderPath, fileName);
        const saved: boolean = imageSource.saveToFile(filePath, "jpg");

        if (saved) {
            console.log("Gallery: " + this._dataItem.picture_url);
            console.log("Saved: " + filePath);
            console.log("Image saved successfully!");
        }
    });

这可以用于创建缩略图，以便在您的应用中快速显示。

检查设备是否有可用相机

开发者应该首先检查设备是否有可用相机。如果相机硬件已准备好使用，方法isAvailable将返回true；如果否则，将返回false。

const isAvailable = camera.isAvailable(); 

注意：当在iOS模拟器中使用时，此方法将返回false（因为模拟器没有相机硬件）

贡献

我们喜欢PRs！查看贡献指南。如果您想贡献，但不确定从哪里开始，请查找标记为help wanted的问题。

获取帮助

请，仅使用GitHub问题进行报告错误或请求新功能。对于一般问题和支持，请查看Stack Overflow或在NativeScript社区Slack频道中询问我们的专家。