PHP/HTML image resize

Question

how can i resize an image like this: resize it to a specified width, keep the proportions and if the height is bigger than a specified value to crop to the specified height ? ok actually i know how to do that but i don't want to do this in a different file and refer the picture something like <img src="picture.php" />.

I need to process the image in the same page that displays it. What "bothers" me is that i have to send the image header so nothing else on the page will be displayed.

Is there a way to do something like that?Maybe from HTML?:P

i made a function that does something like that except that "crop" thing and it returns just width="" height="" and i use it like this <img src="image.jpg" resize("image.jpg") /> , but i don't get how can i do that crop... thanks

Answer 1

You can't render an image and HTML in the same file because browsers depend on its content-type header to interpret it.

The content-type header of a HTML document is generally set to text/html whereas the content-type of an image is image/* (substitute * for image format). You could print image data to a HTML document, but since the browser is instructed to interpret it as text/html rather than an image its contents would be garbled.

You will need to link your <img> tag to a PHP file like you described. I'm not sure why that constitutes a problem; it's the right way to go about it. You could of course crop the image by manipulating its dimensions in HTML, but I don't recommend you do.

Answer 2

create helper like:

<?php
echo '<img src="' . image_resize($path_to_image, SIZE_X, SIZE_Y) . '" />';
?>

so this helper will check if resized image already created or create new one. and in both cases it returns proper url to the new image.

Answer 3

I think ImageMagick supports "resize to fit" and "resize to fill" methods, the latter being what you are looking for.

Before writing your img tag to the output buffer, save the image to the resulting proposed file name and let 'identify' extract the width and height of this image for you.

If you don't want to work with a seperate file but instead want the image data inline, try the data-uri method which newer web browsers support. This inlines the binary data stream of the image within the html file, so it is embedded.

Answer 4

You can use phpThumb, to resize and cropping the images on the fly. It uses the GD library to create thumbnails from images JPEG, PNG, GIF, etc.

Answer 5

ok, so i managed to find a way to do that from html/css. The whole idea was to get rid of that "extraheight" :

<div style="width:200px;height:200px;overflow:hidden;" >
   <img src="image.jpg" width="200px" height="auto">
</div>

first my image is resized to desired width(keeping the proportions) and then giving a fixed height to containing div and setting overflow to hidden makes the script to display just the desired portion of the image.