heartlessg

Okay I have been just developing my projects. And its been a while since I played with PHP powerful function the *drumroll* imagecopyresampled function. In the beginning I never really understood the parameters cause it tends to display weird results. But now I fully understand how it works. As a person who likes to know the ins and outs of everything. I really like to know how to use this function here I will explain for my reference in the future and for anybody who likes a simple understanding of this function.

You probably know this function needs to have GD enabled. If you dont know how just google how to enable it on your server.
Here is the function: imagecopyresampled(destination_resource,image_resource,destination_x,destination_y,src_x, src_y, destination_width,destination_height,src_width,src_height);
Run down below of the parameters:
destination_resource = destination resource is the container of the image, meaning this will be the final dimension of your image and contains the actual image, think of it as a canvas for your paint. When you output the image its the box that will render it. This usually comes from imagecreatetruecolor,imagecreate etc and other functions. specifing the width and height.

image_resource = is of course the resource image itself. Kinda like the paint you will use on the canvas this is the IMAGE you want to put on the container or canvas or the destination resource. This comes from imagecreatefromjpeg,imagecreatefrompng specifying the path to the image.

Now the rest of the parameters we usually do not understand.

destination_x = this is the x coordinate of where you want to put the PAINT or the image inside your canvas your container. This should be pretty straight forward
destination_y = this is the y coordinate this time. The vertical space x is the horizontal space.

src_x = now this one is a little different, this time the x coordinate or horizontal coordinate base on the image itself.
src_y = this is the y coordinate. Heres an example if you have a container of 200x200 and an image of 200x200 as well and you set the coordinate to 100,100 the image will render starting from 100px horizontal and 100px vertical. Only 100x100px will be visible. The first 100 pixels both from the left and top will be hidden. Got it?

Destination width/height is abit tricky this is the STRETCH of how your image will render read more below.
destination_width = this is the IMAGE stretch value of width although it says destination_width/
destination_height = the stretch height value.
To understand this more clearly read the last 2 parameters first.

src_width = this is the width of your IMAGE to display inside the container.
src_height = this is the height of your image.

Okay the last four is abit tricky to explain but I will explain it more thorough here.
Let say again you have 200x200 container and oops you have 150x150 image, now this time the image itself is smaller than the container. If you set the last 4 parameters to the actual width and height of the image which is 150x150 eg. ...150,150,150,150) You will see that the image is rendered 200x200 as per the container height and the 150x150 image inside it retaining its proportion. But less 50x50 and you will notice an empty 50px right and 50 px bottom part of the image usually black space. Now to tweak it abit, we want to STRETCH the whole 150 width and 150 height across the container meaning it will become full size image and covering the empty 50x50 pixels right and bottom. We set the destination_width, destination_height to ...200,200,150,150). render it again and now you will see the 150x150 has stretch to 200x200. Obviously the quality will be reduced but sometimes its tolerable.You will now have a 200x200 pixel image with 200x200 container covering the whole thing.

Now thats the destination width and height, now lets tweak the src_width and src_height. Again if we change the value back to ...150,150,150,150) , the image will not stretch anymore and we will see a blank space 50px to the right and bottom. What happens if we change the src width/height to 300,300 like ....150,150,300,300) when we refresh or render the page..You will now have sort like double the dimension of the image but SQUEEZED this time, you will still see the bottom and right side has more blank space. The STRETCH(destination_width/height) is still 150x150 and its within that dimension.Its actually like a zoom out effect, this is very useful stuff actually to us to be able to zoom it out to show more details if you have a smaller container when creating thumbnails. If you turned it up more let say to 600,600 like ...150,150,600,600) and remember our image is 150x150 . If you calculate 600/150 is 4. So its 4 times smaller now this time, and as you can see theres more SPACES now to the right and bottom part of the whole image. and the image has become really small plus retaining its proportion because the destination_width/height is still set to the original width and height or our image. Did you get all that?

I guess its pretty simple stuff specially when you really test out the function starting from 0,0,0,0 coordinates of the first 4 parameters and setting the last 4 parameters to the actual size of the image originally. Sometimes though your test can go haywire and will confuse your brain, it did with mine for the first time.

Remember the destination_resource is the HOUSE or CANVAS or the TV of the image meaning this will have the overall dimension of the image. And the image resource is the ACTUAL IMAGE you will put in your CANVAS, TV whatever you wanna call it.

Til next time cheeryos!