创建缩略图

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

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

1)创建index2.html

我们将使用与index.html中预设的代码相同的代码创建一个新文件index2.html 。我们稍后将在index2.html文件而不是index.html中进行更改。

2)创建复选框

现在，我们将创建缩略图和高质量复选框。如果用户选中缩略图复选框并使用PhoneGap从相机拍摄图片，则该图片将显示为压缩图片。如果用户选中“高质量”复选框并使用PhoneGap从相机拍摄照片，则该照片将显示为高质量照片。我们将使用 标签创建复选框，并通过以下方式为其添加标签：

Thumbnails

High Quality

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应用程序上运行我们的项目。

完成项目

    
        
        
            
        
        
        
        
        
    
    
        
         Click Picture 
         Clear Picture 
         Thumbnails 
        
         High Quality 
        
         
    

输出量