logo图片
phoneGap教程

photoGap 选择图片

从库中选择图片

在上一节中,我们学习了如何创建缩略图和"高质量"图像。在本节中,我们将学习如何使用 PhoneGap 从库中选择图片。从图库中选择图片的过程与使用相机拍照的过程相同。我们只需要添加一件事,即源类型。我们将在 takePic 函数中进行更改。
这些是用于从库中选择图片的以下步骤:

1 ) 创建一个新项目

首先,我们将使用一个空白模板创建一个新的 PhoneGap 项目。如果您不知道如何使用空白模板创建应用程序,请查看 PhoneGap 项目 链接。
从库中选择图片

2.创建 UI

现在,我们将使用 index.html 文件的主体部分并制作用于拍照并将其显示在显示器或屏幕上的 UI。此 UI 包含用于显示图片的按钮和图像区域。正文部分将被编码为:
<body>
        <img id="imgArea" />
        <button id="btnTakePicture"> Choose Picture </button>
        <button id="btnClear"> Clear Picture </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,目标类型设置为文件 URI,源类型设置为照片库。我们将通过以下方式调用具有成功、失败、选项参数的导航器的 getPicture 函数:
function takePic(e)
        {
            var options = {
                quality: 80,
                destinationType: Camera.DestinationType.FILE_URI,
                sourceType: Camera.PictureSourceType.PHOTOLIBRARY
            }
            navigator.camera.getPicture(success, fail, options);
}

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

失败回调函数只包含一个定义错误的警报消息。成功回调函数将图像作为参数。在这个函数中,我们将获取图像区域并在其中设置图像。
function success(thePicture)
{
            var image = document.getElementById('imgArea');
            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
            {
                border: 1px solid black;
                max-width: 600px;
            }
        </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,
                sourceType: Camera.PictureSourceType.PHOTOLIBRARY
            }
            navigator.camera.getPicture(success, fail, options);
        }
            
        function success(thePicture)
        {
            var image = document.getElementById('imgArea');
            image.src = thePicture;
        }
            
        function fail(e)
        {
            alert("Image failed: " + e.message);
        }
        </script>
        <title> Selecting Picture</title>
    </head>
    <body>
        <img id="imgArea" />
        <button id="btnTakePicture"> Choose Picture </button>
        <button id="btnClear"> Clear Picture </button>
        <script type="text/javascript" src="cordova.js"></script>
        
    </body>
</html>
输出
选择来自图书馆的图片
昵称: 邮箱:
Copyright © 2020 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4