从相机拍摄照片

在前面的部分中，我们了解了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文件的主体部分，并创建一个用于拍照并将其显示在显示器或屏幕上的UI。此UI包含按钮和用于显示图片的图像区域。正文部分将编码为：

        
        Say Cheese!
        Clear Photo
        

3)创建window.onload函数

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

window.onload=function()
        {
            document.getElementById('btnTakePicture').addEventListener('click', takePic);
            document.getElementById('btnClear').addEventListener('click',function(){
               document.getElementById('imgArea').src=""; 
});

4)创建takePic回调函数

现在，我们将创建takePic回调函数。在此函数，我们将设置上面讨论的所有选项。我们将质量设置为80，编码类型设置为JPEG，媒体类型设置为图片，宽度设置为1200，高度设置为800，目的地类型设置为File URI。我们将通过以下方式调用导航器的具有成功，失败和选项参数的getPicture函数：

function takePic(e)
        {
            var options = {
                quality: 80,
                destinationType: Camera.DestinationType.FILE_URI,
                encodingType: Camera.EncodingType.JPEG,
                mediaType: Camera.MediaType.PICTURE,
                targetWidth: 1200,
                targetHeight: 800
            }
            navigator.camera.getPicture(success, fail, options);
}

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

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

function success(thePicture)
{
            var image = document.getElementById('imgArea');
            //alert(thePicture);
            image.src = thePicture;
}
            
function fail(e)
{
            alert("Image failed: " + e.message);
}

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

完整的代码

    
        
        
            
        
        
        
        
        
    
    
        
        Say Cheese!
        Clear Photo
        
    

输出量