0

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

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

现在我只是在（文件的）循环中创建一个 img 标签并使用 CSS 将宽度/高度设置为 60 像素。这是片段：

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

和 CSS： .thumbnail{ padding:5px; 高度：60px；宽度：60px；}

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

4

1 回答 1

1

您需要一次将图像加载到 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

这是小提琴：http: //jsfiddle.net/dpa99c/M2yYp/

于 2012-12-20T16:34:16.667 回答