5

Iamは、さまざまなWebサイトから画像を取得し、Thumnailまたは元の画像のサイズ変更されたバージョンを表示するプロジェクトに取り組んでいます。
一度にたくさんの画像を取得するので、元の画像ファイルが読み込まれるので、時間がかかります。
必要なものには画像のURLが与えられていますが、その画像ファイルのサイズを変更したバージョンが必要ですか？大きな元の画像ファイルをダウンロードする必要がないように...
たとえば：
元の画像：500X800約500kb
必要なもの：100X150約100kbの画像ファイル..Jquery

を使用して可能ですか？またはPHP？Jqueryやプラグインのimagecopyresampled（PHP）のような関数はありますか？

4

4 に答える 4

2

サムネイルを作成するには、大きなファイルを一度ダウンロードする必要があります。

JQuery を使用してできることは、サーバーにサムネイルを要求することです。サーバーはファイルをダウンロードし、サムネイルを作成し、サイズ変更が完了するとサムネイルの URL をクライアントに送り返します。このようにして、クライアントは準備が整うと徐々にサムネイルを受け取ります。

編集少し実験した後、imgが画像をリクエストするとすぐに、その属性を動的に削除してもsrcダウンロードが続行されることがわかりました。

そこで、サンプル コードを作成することにしました (検証はそれほど多くなく、jpeg でのみ機能しますが、他のタイプを追加するのは非常に簡単です)。ソリューションは 3 つの部分に分かれています。

HTML

div最初に、いくつかの特定の属性を持つ空を使用して、jQuery何をロードできるようにしました。Nuria Oliver に謝罪する必要があります。彼女は、私がネット上で見つけた最初の「全体像」を持っていました。だから、ここにサンプルがありますdiv：

<div class="thumbnail" data-source="http://www.nuriaoliver.com/pics/nuria1.jpg" data-thumbnail-width="100" data-thumbnail-height= "200"/></div>

必要なdivを簡単に見つけることができるように使用thumbnailします。class他のパラメーターを使用すると、 、 、およびdataでサムネイルを構成できます。sourcewidthheight

JavaScript / jQuery

ここで、これらすべてのdivs を要求している s を見つける必要がありますthumbnail... jQuery を使用すると、非常に簡単です。すべての設定を抽出し、dataそれらを配列にプッシュします。次に、ページにクエリをフィードPHPし、応答を待ちます。そうしている間、私はdiv「進行状況」を示すHTMLで埋めています

<script type="text/javascript">
    $(".thumbnail").each(function() {
        var img = $(this);
        var thumbnailWidth = img.data("thumbnail-width");
        var thumbnailHeight = img.data("thumbnail-height");
        var thumbnailSource = img.data("source");

        var innerDiv = "<div style='width:" + thumbnailWidth + "px; height:" + thumbnailHeight + "px'>Loading Thumbnail<br><img src='loading.gif'></div>"; 
        img.html(innerDiv); // replace with placeholder

        var thumbnailParams = {};
        thumbnailParams['src'] = thumbnailSource;
        thumbnailParams['width'] = thumbnailWidth;
        thumbnailParams['height'] = thumbnailHeight;

        $.ajax({
            url: "imageloader.php",
            data: thumbnailParams,
            success: function(data) {
                img.html("<img src='" + data + "'>");
            },
        });
    })
</script>

PHP

物事のPHP側面では、画像が既にキャッシュされているかどうかを確認する簡単なテストを行います（ファイル名のみを使用しています。これはより複雑なはずですが、例を示すためだけに使用しました）それ以外の場合は画像をダウンロードします、サイズを変更し、thumbnailフォルダーに保存して、へのパスを返しますjQuery。

<?php

$url = $_GET["src"];
$width = $_GET["width"];
$height = $_GET["height"];

$filename = "thumbnail/" . basename($url);
if(is_file($filename)) // File is already cached
{
    echo $filename;
    exit;
}

// for now only assume JPG, but checking the extention should be easy to support other types
file_put_contents($filename, file_get_contents($url)); // download large picture
list($originalWidth, $originalHeight) = getimagesize($filename);
$original = imagecreatefromjpeg($filename); // load original file
$thumbnail = imagecreatetruecolor($width, $height); // create thumbnail
imagecopyresized($thumbnail, $original, 0, 0, 0, 0, $width, $height, $originalWidth, $originalHeight); // copy the thumbnail
imagedestroy($original);
imagejpeg($thumbnail, $filename); // overwrite existing file
imagedestroy($thumbnail);
echo $filename;

ブラウザ

それで、それは正確に何をしますか？ブラウザーでページを開くと、最初に次のように表示されます。

読み込み中

サーバーが画像の処理を完了するとすぐに、次のように自動的に更新されます。

ロードされた

100x200これは、元の写真のサムネイル バージョンです。

これで必要なものがすべてカバーされることを願っています！

于 2012-12-06T15:34:12.427 に答える
1

PHP Thumbは、私にとってはうまく機能し、操作が簡単な優れたプラグインです。
そして最良の部分は、出力ファイルについて、その品質、ポートレイト画像の最大幅、風景画像の最大幅など、選択する多くのオプションがあることです。また、サーバーリクエストのブロック、ドメインサムネイルのブロック などの権限を設定できます..等

注: これは実際には、この質問への回答として誰かによって投稿されました..しかし、削除されました.だから、役に立ったので再投稿します.

于 2012-12-07T05:24:21.890 に答える
0

画像ソースを難読化することに興味がない場合は、元の画像を取得して別のサイズでリクエストできるhttp://images.weserv.nl/などの外部ツールを利用することをお勧めします。

グローバルCDNに依存しないことになった場合は、少なくとも適切なキャッシュを整理してください。最後にやりたいことは、後続の同じリクエストのために同じ画像のサイズを何度も変更することです。画像のサイズが小さいことによるメリットは、処理時間によって無効になる可能性があります。

于 2012-12-06T22:10:34.547 に答える
0

これが機能するには、jsではできない実際の画像処理を行う必要があるため、サーバー側の言語が必要です.PHPはオプションです

于 2012-12-06T15:34:36.800 に答える