5

我正在从事一个项目，该项目涉及从各种网站获取图像并显示原始图像的缩略图或调整大小的版本。
由于我将一次获取许多图像，这需要更多时间，因为将加载原始图像文件。
我需要的是一个图像 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>

我使用thumbnailasclass可以轻松找到我想要的 div。其他data参数允许我使用 和source配置width缩略图height。

JavaScript / jQuery

现在，我们需要找到所有这些divs 请求thumbnails... 使用 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是一个很好的插件，它对我有用且易于操作。
最好的部分是输出文件有很多选项可供选择，例如其质量、肖像图像的最大宽度、横向图像的最大宽度等。
我们可以设置权限，例如阻止服务器请求、阻止域缩略图.. ETC

注意：这实际上是由某人发布的，作为这个问题的答案..但它被删除了。所以我重新发布它，因为它很有用。

于 2012-12-07T05:24:21.890 回答
0

为此，您需要进行一些您无法使用 js 进行的实际图像处理，因此需要一些服务器端语言。PHP 是一个选项

于 2012-12-06T15:34:36.800 回答
0

如果您对混淆图像源不感兴趣，您可能会非常依赖像http://images.weserv.nl/这样的外部工具，它获取原始图像并允许您以不同的大小请求它。

如果您最终不依赖全局 CDN，至少要整理出适当的缓存。您要做的最后一件事是为后续相同的请求一遍又一遍地调整相同图像的大小 - 图像较小尺寸的任何好处都可能会被处理时间所抵消。

于 2012-12-06T22:10:34.547 回答