从相机拍摄照片

在之前的章节中，我们学习了 UI、存储、地理位置、媒体和设备加速度计。在本节中，我们将学习摄像头，以及如何使用 PhoneGap 拍摄照片。每个人都喜欢拍照，而且几乎每个设备都有某种内置摄像头。在本节的完整内容中，我们将了解摄像头。首先，我们将学习如何设置图像选项，例如图像质量。我们将从摄像头获取图像，返回缩略图，然后从操作系统中的现有图像库中选择图片。

现在，我们将使用设备硬件，即内置摄像头。通过使用 PhoneGap，我们将访问该摄像头。以下是我们在实现代码期间将要查看的图片选项。

1) 质量

质量定义了照片是否会被压缩。因此，如果照片将被压缩，这意味着它将使用更少的存储空间，但它将具有较低的质量。本质上，我们将拥有一个 JSON 类似的颜色像素，这会导致照片看起来像素化或失焦。因此，将添加 50 到一些压缩，我们可以达到 80，这是一个常见的数字，可以为我们提供更高质量的照片。

2) 目标类型

目标类型将告诉我们在拍摄照片时对其进行处理。我们将拍摄我们的照片或 URI（通用资源指示符）路径到照片。

3) 编码类型

PhoneGap 支持两种编码类型，即 JPEG 和 PNG。我们可以使用摄像头编码类型 JPEG 或使用摄像头编码类型 PNG（如果我们的设备支持）来拍摄 PNG 照片。我们可以在这两种格式下拍摄出好的照片。我们可能有一些特殊的原因需要将其从 JPEG 更改为 PNG。

4) 宽度和高度

高度和宽度定义了图片的大小，即照片拍摄时的大小。高度和宽度是 PhoneGap 中用于拍摄照片的最重要的选项之一。

5) 媒体类型

此选项用于定义媒体类型。它可以是图片、视频等。我们将使用 camera.MediaType.Picture 作为媒体类型。

我们将使用这些选项并按照以下步骤从相机拍摄照片

1) 创建一个新项目

首先，我们将使用空白模板创建一个新的 PhoneGap 项目。如果您不知道如何使用空白模板创建应用程序，请浏览 PhoneGap 项目链接。

2) 创建 UI

现在，我们将使用 index.html 文件的 body 部分，并制作一个 UI，用于拍摄照片并将其显示在显示屏或屏幕上。此 UI 包含按钮和一个图像区域，用于显示图片。body 部分将被编码为

3) 创建 window.onload 函数

现在，我们将创建 window.onload 函数。在此函数中，我们将获取两个按钮并将监听器附加到它们。第一个按钮将调用 takepic 函数，第二个按钮将调用匿名函数。在此匿名函数中，我们将使用 Id 获取图像区域，并以以下方式将其源设置为 null

4) 创建 takePic 回调函数

现在，我们将创建 takePic 回调函数。在此函数中，我们将设置我们上面讨论的所有选项。我们将质量设置为 80，编码类型设置为 JPEG，媒体类型设置为图片，宽度设置为 1200，高度设置为 800，目标类型设置为文件 URI。我们将以以下方式调用 navigator 的 getPicture 函数，其中包含成功、失败、选项参数

5) 创建成功和失败回调函数

失败回调函数仅包含一个定义错误的警报消息。成功回调函数将图像作为参数。在此函数中，我们将获取图像区域并在其中设置图像。

现在，我们已准备好运行我们的项目。

完整代码

输出