logo图片
phoneGap教程

photoGap 相机拍照

从相机拍摄照片

在前面的部分中,我们了解了 UI、存储、地理定位、媒体和设备加速度计。在本节中,我们将了解相机以及如何使用 PhoneGap 拍照。每个人都喜欢拍照,几乎每个设备都有某种板载摄像头。在这个完整的部分中,我们将看看相机。首先,我们将了解如何设置图像选项,例如图像质量。我们将从相机获取图像,返回缩略图,然后从操作系统中现有的图像库中选择一张图片。
现在,我们将使用设备硬件,即板载相机。通过使用 PhoneGap,我们将访问该摄像头。这些是我们在代码实现过程中将查看的以下图片选项。

1) 质量

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

2) 目的地类型

目的地类型将告诉我们在拍摄照片时将如何处理它。我们将拍摄我们的照片或照片的 URI(通用资源指示器)路径。

3) 编码类型

PhoneGap 支持两种编码类型,即、JPEG 和 PNG。如果我们的设备支持拍摄 PNG 照片,我们可以使用相机编码类型 JPEG 或使用相机编码类型 PNG。我们可以拍摄两种格式的好照片。我们可能有某种特殊的原因将其从 JPEG 更改为 PNG。

4) 宽度和高度

高度和宽度定义了图片的大小,即照片拍摄后有多大。高度和宽度是PhoneGap中拍照最重要的选项之一。

5) Media type

该选项用于定义媒体类型.它可以是图片、视频等。我们将使用 a camera.MediaType.Picture 作为媒体类型。
我们将使用这些选项并使用以下步骤:

1) 创建一个新项目

首先,我们将使用一个空白模板创建一个新的PhoneGap 项目。如果您不知道如何使用空白模板创建应用程序,请查看 PhoneGap 项目 链接。
从相机拍照

2) 创建用户界面

现在,我们将使用index.html 文件的正文部分,制作一个用于拍照并将其显示在显示器或屏幕上的用户界面。此 UI 包含用于显示图片的按钮和图像区域。正文部分将被编码为:
<body>
        <img id="imgArea" />
        <button id="btnTakePicture">Say Cheese!</button>
        <button id="btnClear">Clear Photo</button>
        <script type="text/javascript" src="cordova.js"></script>
</body>

从相机拍照

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,目标类型为文件 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);
}
现在,我们已准备好运行我们的项目。

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />    
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <style>
            #imgArea
            {
                width: 100%;
            }
        </style>
        <script>
        window.onload=function()
        {
            document.getElementById('btnTakePicture').addEventListener('click', takePic);
            document.getElementById('btnClear').addEventListener('click',function(){
               document.getElementById('imgArea').src=""; 
            });
                                                                 
        }
        
        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);
        }
            
        function success(thePicture)
        {
            var image = document.getElementById('imgArea');
            //alert(thePicture);
            image.src = thePicture;
        }
            
        function fail(e)
        {
            alert("Image failed: " + e.message);
        }
        </script>
        <title>Pic Options</title>
    </head>
    <body>
        <img id="imgArea" />
        <button id="btnTakePicture">Say Cheese!</button>
        <button id="btnClear">Clear Photo</button>
        <script type="text/javascript" src="cordova.js"></script>
    </body>
</html>
输出
从相机拍照
昵称: 邮箱:
Copyright © 2020 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4