Phonegap图片库和大图片

我正在使用电话的HTML5移动应用程序在手机上显示所有照片。我需要将图片显示为缩略图，让用户选择其中的许多图片，然后上传到云服务器。Phonegap图片库和大图片

我发现了很多很好的例子，说明如何以缩略图的形式显示照片并获得简单的版本。但是，由于照片都是3MB，因此在应用程序使用大量内存（和崩溃）之前，我只能显示一些照片。有没有人有正确的方式来建立缩略图的建议？

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

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

和CSS： .thumbnail { 填充：5像素; height：60px; width：60px; }

我没有看到有关使用画布一些东西，并试图简单〔实施例，但似乎也耗尽内存。我的移动应用程序使用HTML5并使用phonegap。该条目是来自HTML5/phonegap代码的fileEntry。

来源

2012-12-18 Kurt Lingle

为什么不以两种尺寸创建图像而不是调整尺寸以创建缩略图？ –

这些照片是在用户手机上。这不是来自我拥有这种控制权的云中的图像。有没有办法在手机上创建缩略图？ –

你会需要一次加载图像到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-20 16:34:16 DaveAlden

因此将图像src置零（在drawImage之后）将释放img内存？我实际上尝试使用画布（以前），但仍有内存问题。我会试着将img.src清空，看看是否有效。感谢您的回复！一旦我确认我会将此标记为答案/已解决。 –

Phonegap图片库和大图片

回答

相关问题