Image Phonegap图像库和大型图片

我正在开发phonegap HTML5移动应用程序，以显示手机上的所有照片。我需要显示缩略图的图片，让用户选择其中许多，然后上传到云服务器

我发现了许多关于如何将照片显示为缩略图的好例子，并得到了一个简单的版本。但是，由于照片都是3mb，在我的应用程序使用大量内存和崩溃之前，我只能显示一些照片。有没有人对创建缩略图的正确方法提出建议

现在我只是在一个文件循环中创建一个img标记，并使用CSS将宽度/高度设置为60px。以下是片段：

$('#gallery').append('<div class="' + uiBlockClass +'"><div class="thumbnail"><img src="'+ entry.fullPath+'" title="'+ entry.name+ '" /></div></div>');  

和CSS： .缩略图{ 填充物：5px； 高度：60px； 宽度：60px； }

---

我确实在画布上看到了一些东西，并尝试了一个简单的exmaple，但这似乎也耗尽了内存。我的移动应用程序是HTML5，使用phonegap。该条目是HTML5/phonegap代码中的文件条目。

您需要将图像一次一个地加载到phonegap中，这样您就不会耗尽内存，将它们复制到画布上，然后卸载它们，如下所示：

var thumbnailWidth = 100; // Thumbnail width in pixels
var gap=10; // gap between thumbnails
var sourceImagePaths = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"]; // paths to source images   
var y=0; // vertical offset on canvas
var i=0; // image index
var image = new Image();
var context = $('#canvas')[0].getContext("2d");

function loadImage(){
  image.onload = onImageLoad;
  image.src = sourceImagePaths[i];
}

function onImageLoad(){
  var height = Math.round((thumbnailWidth/image.width)*image.height);           
  context.drawImage(image, 0, 0, image.width, image.height, 0, y, thumbnailWidth, height);      
  y+= height + gap;
  image.src = null;
  i++;
  if(i<sourceImagePaths.length){
    loadImage();
  }
}     
loadImage(); // load images

---

问题是：

为什么不创建两种尺寸的图像，而不是调整它们的大小来创建缩略图呢？这些是用户手机上的照片。这不是来自云端的图像，我有这样的控制权。有没有办法在手机上创建缩略图？所以在drawImage之后清空image src将为img释放内存？实际上，我以前确实尝试过使用画布，但仍然存在内存问题。我将尝试将img.src置零，看看是否有效。谢谢你的回复！一旦我确认，我会将此标记为答案/已解决。