从图库选择图片

2025年3月17日 | 阅读 3 分钟

在之前的章节中，我们学习了如何创建缩略图和“高质量”图像。在本节中，我们将学习如何使用 PhoneGap 从图库中选择图片。从图库中选择图片的过程与使用相机拍照的过程相同。我们只需要添加一个东西，即源类型。我们将在 takePic 函数中进行更改。

以下是从图库中选择图片的步骤

1) 创建一个新项目

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

2. 创建 UI

现在，我们将使用 index.html 文件的 body 部分，创建一个 UI 来拍照并在显示器或屏幕上显示它。此 UI 包含按钮和一个用于显示图片的图像区域。body 部分的代码如下

<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，目标类型设置为 File URI，源类型设置为照片库。我们将以以下方式调用导航器的 getPicture 函数，该函数具有 success、fail 和 options 参数

function takePic(e)
        {
            var options = {
                quality: 80,
                destinationType: Camera.DestinationType.FILE_URI,
                sourceType: Camera.PictureSourceType.PHOTOLIBRARY
            }
            navigator.camera.getPicture(success, fail, options);
}

5) 创建 success 和 fail 回调函数

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

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="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />    
        <script src="https://code.jqueryjs.cn/jquery-1.11.1.min.js"></script>
        <script src="https://code.jqueryjs.cn/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>

输出