php - 在加载之前调整来自其他网站的外部图像的大小？

Question

我正在从事一个项目，该项目涉及从各种网站获取图像并显示原始图像的缩略图或调整大小的版本。
由于我将一次获取许多图像，因此这需要更多时间，因为将加载原始图像文件。
我需要的是给定一个图像 url，我需要那个图像文件的调整大小的版本吗？这样我就不需要下载大型原始图像文件...
例如:
原始图像:500X800 约 500kb
我需要的是:100X150 一些 100kb 的图像文件..

可以使用 Jquery 吗？还是PHP？它们是否具有 Jquery 或任何插件中的 imagecopyresampled(PHP) 之类的功能？

Answer 1

嗯，需要一次下载大文件来创建缩略图。

您可以通过 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>

我使用 thumbnail 作为 class 以便能够轻松找到我想要的 div。其他 data 参数允许我使用 source、width 和 height 配置缩略图。

JavaScript/jQuery

现在，我们需要找到所有这些请求缩略图的div...使用jQuery 非常容易。我们提取所有 data 设置并将它们放入一个数组中。然后，我们将查询提供给 PHP 页面并等待响应。在这样做的同时，我用一些显示“进度”的 HTML 填充 div

<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。

我希望这涵盖了您需要的一切!