使用 NativeScript 和其跨平台相机 API 拍摄自拍

如今，相机传感器在越来越多的场景中发挥着作用。它不仅是拍摄流行的自拍或与朋友合影，还涉及到重要的商业场景。

今天，我想向您介绍跨平台相机 API，并演示如何使用单个共享 JavaScript 代码库轻松地使用 Android 和 iOS 设备拍摄照片。

相机 API 是 相机模块 的一部分，您可以在每个 NativeScript 项目的 tns_folder 中找到它。

简单的相机 API 使用

添加对相机模块的引用很简单，只需设置以下 require 声明

此外，为了实际拍摄照片，您需要调用 takePicture 方法，该方法属于 cameraModule。这将启动原生平台相机应用程序：

拍摄照片后，点击保存（Android）或使用图像（iOS）按钮，promise 将返回一个图像对象

您可以将此位图对象放在 ListView 或简单的 Image 容器中。让我们看看如何将其放在后者中

1. 在 main-page.xml 中定义以下 XML
   
   <Page loaded="onPageLoaded" xmlns="http://www.nativescript.org/tns.xsd" >

      <GridLayout rows="*, auto">

          <Image id="img" row="0" />

          <Button tap="tapAction" text="Take a selfie!" row="1"/>

      </GridLayout>

   </Page>
2. 在 main-page.js 中实现以下 JavaScript 代码
   
   var cameraModule = require("camera");

   var imageModule = require("ui/image");

   var view = require("ui/core/view");

    

   var imageContainer;

    

   function onPageLoaded(args) {

      var page = args.object;

      imageContainer = view.getViewById(page, "img");

   }

    

   function tapAction() {

      cameraModule.takePicture().then(function (picture) {

          imageContainer.imageSource = picture;

      });

   }

    

   exports.onPageLoaded = onPageLoaded;

   exports.tapAction = tapAction;

考虑质量

大多数中高端设备都配备了质量相当不错的相机，这会导致默认的图像文件非常大，而我们并不总是需要这些文件。takePicture() 方法接受以下可选参数，以帮助您定义照片的大小

• width - 期待的图片宽度（以设备独立像素为单位）。
• height - 期待的图片高度（以设备独立像素为单位）。
• keepAspectRatio - 一个布尔值参数，指示是否应保持纵横比。

“什么是设备独立像素？”您可能会问。Google Android 团队的这段优秀视频对这个问题给出了一个相当全面的答案：https://www.youtube.com/watch?v=zhszwkcay2A 。简而言之，正如视频所说

设备（或密度）独立像素（缩写为 dp 或 dip）是虚拟像素单位，相当于 160dpi（MDPI）屏幕上的一个物理像素，并在更高或更低密度的屏幕上按比例缩放。

NativeScript 布局机制在测量 UI 控件时使用设备独立像素。这使您可以声明一个布局，并且此布局将在所有设备上看起来相似（无论设备显示分辨率如何）。

设置 keepAspectRatio 属性可能会导致与请求的 width 或 height 不同的结果。相机模块将返回一个具有正确纵横比的图像，通常只有一个尺寸参数（width 和 height）与请求值相同，而另一个值将被计算以保留原始图像的纵横比。

以下是如何使用该尺寸 API

所以，让我们看看 Telerik 的一个压力球用这个应用程序做了什么

祝您 拍摄照片 编码愉快！