0

ビューポート内の画像をスライスしてサムネイルを作成することは可能ですか? おそらくJqueryで！この例と同様ですが、canvs 要素を使用しません。Galleria はそのようなことを行いますが、すべての画像をキャッシュにロードしてサイズを変更するのはかなり遅いです。プリローダーを使用していますが、すべてのサムネイルを 50X50 にする必要があるため、画像のサイズを変更する方法がわかりません。よろしくお願いします。

4

3 に答える 3

1

jQuery に言及しているということは、Web ページの一部としてサムネイルの生成を行いたいということですか?

これが事実である場合、Sneakyness が暗示したように、クライアント (Web ブラウザー) でこれを行うのは悪い考えです。クライアントでこれを実行する予定がある場合は<img src="/images/really_large_file.jpg" border="0" height="50" width="50">、クライアントで (Web ブラウザーで) サムネイルを生成する場合、訪問者はサムネイルを作成するすべての画像のフル バージョンをダウンロードする必要があるため、そうすることをお勧めします。これらの画像が大きい場合、これは非常に遅くなります。10KB の画像が 100 個あっても 1MB の画像です。ダイヤルアップ モデムでは、ダウンロードに約 4 分かかります。

サムネイルは、事前に (アップロード時に) または動的に (訪問者の要求に応じて) サーバー上で生成する必要があります。

本当にこれをやりたい場合 (お勧めしません)、次のような方法でそれを行うことができます:

<script type="text/javascript">
function maintainAspectRatio(img) {
    // retrieve a new copy of the image that is not sized 50 x 50
    var newImg = new Image();
    newImg.src = img.src;
    // get the ratio of the width to the height
    var ratio = newImg.width / newImg.height;
    if (ratio > 1) {
        // ratio is >1, preserve width 50, scale height
        img.width = 50;
        img.height = 50 / ratio;
    } else if (ratio < 1) {
        // ratio is <1, preserve height 50, scale width
        img.width = ratio * 50;
        img.height = 50;
    }
}
</script>
<!--
load image as 50 x 50 "thumbnail" to reserve screen space
this will most likely result in the aspect ratio being corrupted
we will use JavaScript to fix this
-->
<img src="http://www.google.com/intl/en_us/images/logo.gif"
    border="0" height="50" width="50"
    onload="maintainAspectRatio(this);">
于 2009-07-22T18:13:19.800 に答える
1

ユーザーがページにアクセスする前に、大量のサムネイルを生成する必要があります。事前にサムネイル ジェネレーターを使用してそれらをすべて実行し、ファイルを使用するだけで、より多くの時間を節約できます。

これらは 50x50 であるため、大量に存在するという仮定から外れています。

于 2009-07-22T15:44:01.167 に答える
0

利用可能な画像トリミングプラグインがあります。しかし、あなたが何を意味するのか完全にはわかりません。

于 2009-07-22T15:41:28.470 に答える