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圖片庫和大圖片

回答

相關問題