在加载外部图像之前调整外部图像的大小？

Question

我正在开展一个项目，包括从各个网站获取图像并显示Thumnail或重新调整版本的原始图像。
因为我将在时间上获取许多图像，这将花费更多时间，因为将加载Orignal图像文件。
我需要的是图片网址，我需要调整该图片文件的版本？所以我不需要下载大型orignal图像文件......
例如：
原始图像：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的{​​{1}} ...使用jQuery这很容易。我们提取所有thumbnail设置并将它们推送到数组中。然后，我们向data页面提供查询并等待响应。在这样做的同时，我正在用PHP填充一些显示“进度”的HTML

div

<强> PHP

在<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文件夹中并返回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; 。

我希望这涵盖了你需要的一切！

Answer 2

PHP Thumb是一个很好的插件，它对我有用并且易于操作 最好的部分是许多选项关于输出文件，例如质量， potrait图像的最大宽度，最大景观图像的宽度等。
我们可以设置权限，例如阻止服务器请求，阻止域缩略图等等

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

Answer 3

为了这个工作你需要做一些你不能用js做的实际图像处理，所以需要一些服务器端语言.PHP是一个选项

Answer 4

如果您对混淆图像源没有兴趣，您很可能会依赖http://images.weserv.nl/之类的外部工具，该工具需要original image并允许您request it in a different size。

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