Question

我正在使用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 { 填充：5像素; 高度：60像素; 宽度：60像素; }

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

Answer 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/

Phonegap图片库和大图片

1 个答案: