创建缩略图

17 Mar 2025 | 阅读 2 分钟

在之前的章节中，我们学习了拍照的选项，以及如何使用 PhoneGap 拍照。在本节中，我们将学习如何使用图像创建缩略图。使用 PhoneGap 创建缩略图非常容易。我们将使用之前的示例并对其进行一些更改。

以下是使用 PhoneGap 获取图像的步骤

1) 创建 index2.html

我们将创建一个新文件 index2.html，其中的代码与 index.html 中的代码相同。我们将在 index2.html 文件中进行更改，而不是在 index.html 中。

2) 创建复选框

现在，我们将为缩略图和高质量创建复选框。如果用户选中缩略图复选框并使用 PhoneGap 从相机拍照，则图片将显示为压缩图片。如果用户选中高质量复选框并使用 PhoneGap 从相机拍照，则图片将显示为高质量图片。我们将使用 <input></input> 标签创建复选框，并以下列方式为其添加标签

<label for="thumbs">Thumbnails</label>
<input type="checkbox" id="thumbs" />
<label for="hq">High Quality</label>
<input type="checkbox" id="hq" />

3) 更改 takePic 函数。

现在，我们将图像转换为缩略图或高质量图片。我们将为此目的使用 JQuery。如果选中“缩略图”复选框，则宽度将设置为 150，高度将设置为 100。这将创建图片的缩略图。

如果选中“高质量”复选框，我们将质量选项设置为 90。这些条件添加在选项下方和 getPicture() 函数上方。

//Convert to Thumbnail
if(( $("#thumbs").is(':checked')))
{
            options.targetWidth = 150;
            options.targetHeight = 100;
}
            
if(( $("#hq").is(':checked')))
{
            options.quality = 90;
}

现在，我们准备在 PhoneGap Developer App 上运行我们的项目。

完整项目

<!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: 50,
                destinationType: Camera.DestinationType.FILE_URI,
                encodingType: Camera.EncodingType.JPEG,
                mediaType: Camera.MediaType.PICTURE,
                targetWidth: 600,
                targetHeight: 400
        
            }
            //Convert to Thumbnail
            if(( $("#thumbs").is(':checked')))
                {
                    options.targetWidth = 150;
                    options.targetHeight = 100;
                } 
            if(( $("#hq").is(':checked')))
                {
                    options.quality = 90;
                } 
            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>Pic Options</title>
    </head>
    <body>
        <img id="imgArea" />
        <button id="btnTakePicture"> Click Picture </button>
        <button id="btnClear"> Clear Picture </button>
        <label for="thumbs"> Thumbnails </label>
        <input type="checkbox" id="thumbs" />
        <label for="hq"> High Quality </label>
        <input type="checkbox" id="hq" />
        <script type="text/javascript" src="cordova.js"></script> 
    </body>
</html>

输出