image resize

saunders1989

I am really struggling with this part of my website and i cant seem to figure it out. what i need to do is literally resize an image. at the moment when the user goes to the one of the gallerys a script is called which is named imageResize.php. (let me know if you would like to see the script) what i need to do is when the user clicks the thumbnail it takes them to another page called image.php and shows the full sized image but i need to shrink it down but i havent a clue how. any ideas would be great.

this is the code i use for the thumbnail page:

while ($row = $result->fetch_assoc()) {

echo "<a href=\"image.php?id=" . $row['id'] . "\">";
echo "<img src=\"imageResize.php?imageFilename=" . $row['name'] . "&maxHeight=90,&maxWidth=150\" />\n";
echo "</a>\n";

}

and this is the the image.php page:

while($row = $result->fetch_array()) { 

echo "<div id=\"image\">\n";
echo '<img src="' . $row['image_path'] . '" />';
echo "</div>\n";

echo '<p>' . $row['desc'] . '</p>';
}

johnpeace

Sounds like you need the GD library

saunders1989

is there not a way of using the same script i have but calling it a different name so i can change the values?

johnpeace

saunders1989;10942458 wrote:
is there not a way of using the same script i have but calling it a different name so i can change the values?

Ah, so your imageResize.php script is supposed to do this already...I see.

First, check the file permissions on the directory where that script is creating/saving image files.

Then, this does not look correct

while ($row = $result->fetch_assoc()) {

echo "<a href=\"image.php?id=" . $row['id'] . "\">";
echo "<img src=\"imageResize.php?imageFilename=" . $row['name'] . "&maxHeight=90,&maxWidth=150\" />\n";
echo "</a>\n";

}

Why the comma in the URL query string?

Can you give me a link to the imageResize.php script?

saunders1989

this is imageResize:

<?php

error_reporting(E_ALL &~ E_NOTICE);

$image = "C:/wamp/www/Blean_Photos/images/" . $_GET['imageFilename'];

switch(strtolower(substr($_GET['imageFilename'], -3))) {
case "jpg" :
$fileType = "jpeg";
$imageCreateFunction = "imagecreatefromjpeg";
$imageOutputFunction = "imagejpeg";
break;
case "jpeg" :
$fileType = "jpeg";
$imageCreateFunction = "imagecreatefromjpeg";
$imageOutputFunction = "imagejpeg";
break;
case "png" :
$fileType = "png";
$imageCreateFunction = "imagecreatefrompng";
$imageOutputFunction = "imagepng";
break;
}

if(!$_GET['maxWidth']) {
$maxWidth = 100;
} else {
$maxWidth = $_GET['maxWidth'];
}

if(!$_GET['maxHeight']) {
$maxHeight = 150;
} else {
$maxHeight = $_GET['maxHeight'];
}

$size = GetImageSize($image);
$originalWidth = $size[0];
$originalHeight = $size[1];

$x_ratio = $maxWidth / $originalWidth;
$y_ratio = $maxHeight / $originalHeight;

// check that the new width and height aren't bigger than the original values.

if (($originalWidth <= $maxWidth) && ($originalHeight <= $maxHeight)) { // the new values are higher than the original, don't resize or we'll lose quality
$newWidth = $originalWidth;
$newHeight = $originalHeight;
} else if (($x_ratio * $originalHeight) < $maxHeight) {
$newHeight = ceil($x_ratio * $originalHeight);
$newWidth = $maxWidth;
} else {
$newWidth = ceil($y_ratio * $originalWidth);
$newHeight = $maxHeight;
}

$src = $imageCreateFunction($image);
$dst = imagecreatetruecolor($newWidth, $newHeight);

// Resample
$thumbnail = imagecopyresampled($dst, $src, 0, 0, 0, 0, $newWidth, $newHeight, $originalWidth, $originalHeight);
unset($image);
// Output


Header('Content-type: image/' . $fileType);
$imageOutputFunction($dst);

ImageDestroy($src);
ImageDestroy($dst);

?>

the file takes the image directly from a folder called images as you can see in the script.

when you say comma are you reffering to the maxwidth part?

johnpeace

saunders1989;10942461 wrote:
when you say comma are you reffering to the maxwidth part?

Yeah...

saunders1989

im not 100% sure but those values do change the size of the thumbnails i have so they are a neccessary part of the url.

ps. i am very new to php and not very good.

johnpeace

So...what happens, do you get any errors? (they'll probably appear in the <img> tag that uses this script.

johnpeace

There can be several reasons for this.

Point your browser to the URL you're using in your img src attribute, you'll see some errors.

Can getimagesize() even open your image? If not, it's a file permissions problem.

It didn't work for me when I tried to run the script on an image in my Pictures directory. But when I copied that same image file to the web document root and changed the path to the image in $image to reflect that...it worked fine.

Of course, all of these functions will require the GD library to be compiled into your PHP. You can check this with phpinfo().

saunders1989

I have not used getImageSize and not sure how to go about that. Oh that's odd the script didn't work. Not sure why cause it does create thumbnails for me. I do have gd library working. I checked doing phpinfo() a while back.

halojoy

You should remove comma in following line, as already told.
Like this

echo "<img src=\"imageResize.php?imageFilename=" . $row['name'] . "&maxHeight=90&maxWidth=150\" />\n"

I think there can be an error in the ImageOutputFunction line.
You create $thumbnail but you never use it ????
Maybe should be:
```
// Output
Header('Content-type: image/' . $fileType);
$imageOutputFunction($thumbnail);
```

saunders1989

It's not the thumbnails I'm having issues with. It's when I click on the thumbnail and go to image.php and the full sized image is displayed. I need that to be resized somehow.

halojoy

I thought you posted your thumbnail creation script
because it did not work.

So, why you have variable created, $thumbnail which is of no use?

It is easy to see what I mean.
I make one variable and end my script.
So why create a variable? What use?
$weather = 'sunny';
exit( 'end of script' );

Then I kindly suggest you remove the following line in your script.
Because it does nothing:

// Resample
$thumbnail = imagecopyresampled($dst, $src, 0, 0, 0, 0, 
$newWidth, $newHeight, $originalWidth, $originalHeight);

saunders1989

The thumbnail script works. My issue is I want the image on image.php to be resized. But I don't know how to parse the script through it.

johnpeace

Why don't you just serve the image on image.php the same way you do your thumbnail.

Just change the maxheight and maxwidth parameters in the URL so the image on that page is resized to whatever dimensions you want.

saunders1989

echo '<img src="imageResize.php?imageFilename=' . $row['image_path'] . '" />';

doing that doesnt display an image

johanafm

It could be because your code (possibly) outputs error messages, which means that the output is not an image, but rather text followed by an image.

In your last post, you did not specify max width and height, which means that

saunders1989;10942461 wrote:
if(!$_GET['maxWidth']) {
}

if(!$_GET['maxHeight']) {
}

will cause two errors for undefined variables $_GET['maxWidth'] and $GET['maxHeight']. You should use

!isset($_GET['maxWidth'])

Also, you should either turn off error output, and stick to error logging, or start your script with ob_start then before setting content type header and sending image data, you use ob_get_clean to see if there is anything in the output buffer. If so, error log it (if you care), otherwise output the image.

Apart from this, not specifying max width and height means you'll be resizing the image to a very small size. It was around 150x100 or somethihng like that iirc, which seems very small for anything but a thumbnail.

Also, what is the purpose of resizing the image every time it is displayed? It is far more efficient to resize once and display resized image, than resizing on each display.

saunders1989

i figured out i needed to do this in my imc src. i had to change the name in the row variable for it to display the image:

echo '<img src="imageresizescript.php?imageFilename=' . $row['name'] . '" />';

could you explain a little more about this not having to resize all the time to make it more efficient as i am new to php i dont really know how i would go about this sort of thing.

also could you explain the output buffer in a bit more detail please

johanafm

Let's assume a couple of thing.
You have one single image, which is 1400x700 pixel.
Some of your users have 1440x800 or higher screen resolution and you serve them the full sized image (1400x700)
Most of your users have 1024x768 or lower screen resolution and need a resized image (980x490)

So, for some of your users you just read the image data from the image file, realize no conversion is needed and send image data to the browser.
But for most of your users, you have to read in image data, realize resizing is needed, make use of GD or Imagick to make the necessary resizing of the image, and then send the newly resized image to the browser.

Looking at the difference between these two cases, it becomes apparent that one part in the second case is extra work, compared to the first case: resizing the image. But since you resize to the same dimensions every time, why bother?

What you do instead is:
decide what image dimensions you need.
resize the original to all these dimensions.
store them in a way so that it is possible to retrieve them in the right format.

That is, you save the 1400x700 image, you also resize it to 980x490 and save this.
Now, for each incoming request you decide which image size the user should get, and then either serves the 1400x700 image or the 980x490 image. Every request for the smaller image is suddenly faster as it requires no additional image processing, just plain i/o: read from disk, send output to browser. The cost is additional memory usage: you now have two images on disk instead of one. But storage is cheap so it (probably) doesn't matter.

And the same obviously goes for thumbnails. Resize once (create thumbnail) and store on disk.

Edit: But if you happen to get a visitor with 640x480 screen resolution and don't want them to suffer scrolling, this might be an appropriate example case for on-demand resizing of the image. It happens so rarely that it doesn't matter if you do it on the fly or not.

saunders1989

wow thats a lot to take in and try to understand. i see your point being quicker and effecient to do it that way. but i wouldnt know how to create that kind of code or even modify the code i have now to do something like that. that would be my problem as im nto very good at this php coding at the moment