php - resize external images from other websites before loading them? - Stack Overflow

admin管理员组

文章数量:1418591

Iam working on a project , which involves fetching images from various websites and displaying a Thumnail or resized version of orignal image.
As i will be fetching many images at time , this takes more time , As Orignal image files will be loaded.
What i need is given an image url , i need resized version of that image file? So that i need not download the Large orignal image file...
for example :
orignal image : 500X800 some 500kb
what i need is : 100X150 some 100kb image file..

Is it possible using Jquery? OR PHP? Are their any functions like imagecopyresampled(PHP) in Jquery or any plugins?

Iam working on a project , which involves fetching images from various websites and displaying a Thumnail or resized version of orignal image.
As i will be fetching many images at time , this takes more time , As Orignal image files will be loaded.
What i need is given an image url , i need resized version of that image file? So that i need not download the Large orignal image file...
for example :
orignal image : 500X800 some 500kb
what i need is : 100X150 some 100kb image file..

Is it possible using Jquery? OR PHP? Are their any functions like imagecopyresampled(PHP) in Jquery or any plugins?

• php
• javascript
• jquery
• ajax

Share Improve this question Follow edited Dec 6, 2012 at 15:48 Vamsi Krishna asked Dec 6, 2012 at 15:31 Vamsi KrishnaVamsi Krishna 6111 silver badge66 bronze badges 4

• You have to use PHP. JQuery has no way to alter the actual file size of the image. – Cfreak Commented Dec 6, 2012 at 15:33
• You are asking the host server to resize it so no, that's not possible unless you have authority over the server. Unless host server provides such resizing options – Bhrugesh Patel Commented Dec 6, 2012 at 15:36
• You will ALWAYS download the image to your server if you use PHP and to client puter if you use JS before you resize it if you don't own the remote server. – Taha Paksu Commented Dec 6, 2012 at 15:36
• Vamsi, was your question answered? Is there something that you would want more explanation on? – emartel Commented Dec 25, 2012 at 7:36

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Well, the big file needs to be downloaded at one point to create the thumbnail.

What you can do, through JQuery, is ask your server for the thumbnail, the server downloads the file, creates the thumbnail and sends back to the client the URL of the thumbnail when the resizing is done. This way, the client will gradually receive thumbnails as they are ready.

Edit After experimenting a bit, I found out that as soon as an img requests a picture, even if you dynamically remove its src attribute, the download continue.

So I decided to write a sample code (there's not much validation and it only works for jpeg, adding the other types would be really easy though). The solution is divided in 3 parts:

HTML

First, I used an empty div with some specific attributes to let jQuery what to load. I need to apologize to Nuria Oliver, she had the first "big picture" I could find on the net. So, here's a sample div:

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

I use thumbnail as class to be able to find easily the divs I want. The other data parameters allow me to configure the thumbnail with the source, width and height.

JavaScript / jQuery

Now, we need to locate all these divs requesting thumbnails... using jQuery it is pretty easy. We extract all the data settings and push them in an array. We then feed a PHP page with the query and wait for the response. While doing so, I'm filling the div with some HTML showing the "progress"

<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

On the PHP side of things, I do a quick test to see if the picture has already been cached (I'm only using the file name, this should be more plicated but it was just to give you an example) otherwise I download the picture, resize it, store it in a thumbnail folder and return the path to 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;

Browser

So, what does it do exactly? In the Browser, when I open the page I first see:

And as soon as the server is done processing the image, it gets updated automatically to:

Which is a thumbnail version, 100x200 of our original picture.

I hope this covers everything you needed!

PHP Thumb is a good plugin it worked for me and easy to operate.
And the best part is there are many options to select about the output file like its quality, max width for potrait images , max width for landscape images etc..
And we can set permissions like block off server requests, block off domain thumbnails.. etc

Note: this was actually posted by someone , as an answer to this question..But it was deleted.So iam reposting it, as it was useful.

for this to work you need to do some actual image processing which you cant do with js, so some server side language is needed.PHP is an option

If you are not interesting in obfuscating the image source, you may very well rely on an external tool like http://images.weserv.nl/ which takes an original image and allows you to request it in a different size.

If you end up not relying on a global CDN, at least sort out proper caching. Last thing you want to do is resize the same image over and over again for subsequent identical requests - any benefit of image's lower size will probably be negated by processing time.

本文标签： phpresize external images from other websites before loading themStack Overflow