15

FileAPIで使用するサムネイルを生成するエレガントな方法を探しています。現在、画像を表すDataURLを取得しています。問題は、画像が非常に大きい場合、移動して再レンダリングするよりも CPU を集中的に使用することです。これを回避するには、2 つのオプションがあります。

  • クライアントでサムネイルを生成する
  • サーバーでサムネイルを生成し、サムネイルをクライアント (AJAX) に送り返します。

HTML5私たちはcanvas要素を持っていますか？写真からサムネイルを生成するためにそれを使用する方法を知っている人はいますか? 完璧である必要はありません。サンプリングの品質は許容範囲です。jQuery私のためにこれを行うプラグインはありますか？大きな画像のクライアント側での使用を高速化する他の方法はありますか?

私は を使用してHTML5おり、Firefox 3.6+: 以外のものをサポートする必要はありFirefox 3.6+ません。IE 6.0

4

2 に答える 2

16

できることは次のとおりです。

function getThumbnail(original, scale) {
  var canvas = document.createElement("canvas");

  canvas.width = original.width * scale;
  canvas.height = original.height * scale;

  canvas.getContext("2d").drawImage(original, 0, 0, canvas.width, canvas.height);

  return canvas
}

サムネイルを作成するには、次のようにします。

var image = document.getElementsByTagName("img")[0];
var thumbnail = getThumbnail(image, 1/5);

document.body.appendChild(thumbnail);

注:onloadサムネイルを作成する前に、必ず画像が読み込まれていることを確認してください ( を使用)。

于 2011-09-26T15:45:41.290 に答える
11

さて、この作業を確認する方法は、イメージを小さいサイズでキャンバスに描画してから、キャンバスをエクスポートすることです。64px のサムネイルが必要だとします。

var thumbSize = 64;
var canvas = document.getElementById("canvas");
canvas.width = thumbSize;
canvas.height = thumbSize;
var c = canvas.getContext("2d");
var img = new Image();
img.onload = function(e) {
    c.drawImage(this, 0, 0, thumbSize, thumbSize);
    document.getElementById("thumb").src = canvas.toDataURL("image/png");
};
img.src = fileDataURL;

このコードでは、「thumb」という ID を持つイメージ要素がサムネイル要素として使用されます。fileDataURLファイル API から取得したデータ URL です。

キャンバスへの画像の描画に関する詳細: http://diveintohtml5.info/canvas.html#images

キャンバス データのエクスポートについて: http://msdn.microsoft.com/en-us/library/ie/ff975241(v=vs.85).aspx

于 2011-05-14T22:31:59.177 に答える