0

私は携帯電話にすべての写真を表示する phonegap HTML5 モバイル アプリケーションに取り組んでいます。写真をサムネイルとして表示し、ユーザーがそれらの多くを選択してからクラウド サーバーにアップロードできるようにする必要があります。

写真をサムネイルとして表示する方法に関する多くの優れた例を見つけ、簡単なバージョンを機能させました。しかし、写真はすべて 3 MB であるため、アプリが大量のメモリを使用する (そしてクラッシュする) 前に、いくつかしか表示できません。サムネイルを作成する正しい方法に関する推奨事項はありますか?

現在、(ファイルの) ループで img タグを作成し、CSS を使用して幅/高さを 60 px に設定しています。スニペットは次のとおりです。

$('#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 コードからの fileEntry です。

4

1 に答える 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 に答える