我正在使用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。
答案 0 :(得分: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