i don't know if this question fits here but i want to understand the formula for resizing an image while keeping the ratio in PHP GD library or in anything else.
For example here is an example:
http://salman-w.blogspot.com/2008/10/resize-images-using-phpgd-library.html
In this example if "target_aspect_ratio" is bigger than "original_aspect_ratio" height is targe_height and width is calculated by target_height * original_aspect_ratio.
If "original_aspect_ratio" is bigger than "target_aspect_ratio" target width is target_width and height is calculated by target_width / original_aspect_ratio
Why is that?
The way that I always resize images when maintaining the ratio is to use an algorith like the following:
$imgHeight=600; // Or the actual image height.
$imgWidth=300; // Or again the width of the image
$imgRatio=$imgHeight/$imgWidth;
Then to resize the image you can use the following:
$newHeight=1000;
resize($newHeight, ($newHeight/$imgRatio));
// assumes Height x Width in the resize command.
With this method, you get the ratio of the original image, then apply it to whatever size you need.
Edit:
If you are doing thumbnails, you often will want to keep the image size of all the thumbnails the same exact size - so they line up nicely on a page. I would suggest resizing the image so that the resized image fits INSIDE the actual thumbnail - basically giving it space on either the top or bottom, and then fill that in with a background color or leave it transparent so that it works with the rest of the site.
Related
I am using ImageMagick with PHP to resize images (using its commandline tool "convert").
I am able to resize images and everything works.
What I want to do is I want to resize an image (of any dimension) to an image setting the minimum width and maximum height and at the same time preserve the image resolution/aspect ratio. How do I do this?
Why I want this: I am putting these images in a news feed in my website where I require images to be of width:100% but the problem is height becomes too large for certain images and occupies an entire page. I want to avoid it.
This is what I am using for resize:
$cmd="convert -thumbnail ".$width."x".$height." \"".$source."\" \"".$dest."\";";
You can find the resize options on the Imagemagick website: http://www.imagemagick.org/script/command-line-processing.php#geometry
I do not think these will achieve what you want so I would check the dimensions of your image and calculate the height to go with your width which you can use in your convert code.
In smarty there is the imagesize function which you can pass it a height and a width and it will scale it down until the first dimension property is meet.
E.g. if you have an image that is 5000x3000
and you pass the function width=500 height=150
you will end up with an image that is 500x300
You can also pass the function crop=true and it will crop the image at the dimension that does not fit to make it fit the dimensions, but that cuts off part of the image.
I am wondering if there is a way to make it scale the image down until both dimensions are met, It then fills the remaining area with a transparent background centering the image.
so you would end up with your actual image scaling down to 350x150 it would then fill the left and right with 75 pixels of transparency so your whole file is 500x150
if an image is passed that is smaller than the given dimensions the same process would take place with the transparent pixels filling in the remaining space.
Does smarty have this ability? or is there a way to make it work?
No, there is no such function.
The only function there is, is html_image, which will automatically insert width and height to the img-tag depending on the actual image size.
But none the other way around.
You can however write your own plugin, which could give smarty the ability to scale images.
I want to resize the image without affecting its quality using PHP.When I trying to do with imagick or GD library in PHP if I give the fixed width or height its going to be affect the quality of image.So when I try with some other sites they are doing like depend upon the image size they dynamically resize the images.ie if I upload image in two different size when re-sizing both the images contains different width and height .But in my application when I give the thumbnail width 640(both imagic and GD library) then I will get the images with 640 image size.I want to know how do they dynamically calculate the image width and height for resizing?And also when resizing very low size image how can I achieve the quality?
If you want to keep the aspect ratio of the image while resizing it, you can keep only one of the width or height as constant while other one you need to calculate based on the aspect ratio.
For example if you want to make the image width as 640, you can find the targetHeight using following formulta
targetHeight = sourceHeight/sourceWidth * 640;
if i want to crop an image within the limits of 900px by 1000px what is a good formula to use to crop an image by its aspect ratio within the given limits and preferably using a percentage crop so that the image doesn't get distorted.
Check out this php class. http://www.white-hat-web-design.co.uk/articles/php-image-resizing.php
It can scale an image by width, height, or percentage. And you can resize an image to a width, height, or both.
I have an image that I want to be watermarked to the bottom right section of other images.
The dimensions of the watermark image are 179 width, 39 height.
Now what if I have another image whose dimensions are 150 width, 20 height? If we tried to watermark it using the original image, it would obviously be too large and the image itself would be masked completely by the watermark image, right?
So how can I determine a smaller width and height to which I will resize the watermark image, something much less than 150 width, 20 height, so that it will appear still as a watermark and wont mask the image completely?
You need to pick a maximum percentage of height and width of the smaller image that you can allow the watermark to be, then scale watermark image to the smaller of these two maximum values. Your results will vary based on whether the target image is taller than it is wide, or vice versa.
For example, if you want the watermark to be no more than 25% of the height and no more than 50% of the width of the target image, you can see how big the watermark should be if you scaled it to either dimension.
Scaling to 50% of the width would mean the watermark would be 75 x 16 pixels, which is too tall (based on the percentages I selected arbitrarily).
(75 / 179) * 39 = 16
Scaling to 25% of the height would mean a watermark of 22 x 5.
(5 / 39) * 150 = 19
If the dimensions end up being larger than the original watermark, it's up to you whether or not to scale the watermark up. Image quality degrades much faster when increasing the size of an image, compared to decreasing its size by the same factor.
First out, I recommend you to generate a set of watermark images of different sizes instead of resizing 'on the fly'.
Below I have outlined a workflow of how to watermark images dynamically on a website:
Design a good watermark
First of all, try to design the watermark with a transparent background. This will greatly reduce the risk of cover up essential parts of the target image. This can be done by using the gif or (preferably) the png imagefile format. Just make sure that the transparent watermark works well both on light and dark backgrounds.
Also take into account how to best design the watermark that works both for portrait and landscape style images and images with awkward aspect ratios. You should consider to make two versions -- one for wide images and one for tall images. For the latter type, you could rotate the watermark 90 degrees or, if the watermark consists of text, you might want to split the text into two or more lines.
Pre-render the watermark in several different sizes
So, don't dynamically resize the watermark, instead I recommend you to render a set of watermark images with different sizes. This only has to be done once and it will greatly enhance the clarity and/or legibility of the watermark (especially for smaller target images).
Depending of how different the images will be on the web page, you might need a larger or smaller number of sizes. This is a design choice that you will have to make, but I think you could get away with only two or three different sizes.
Apply the watermark
This will happen dynamically on the server side (in your php-file). First find out the dimensions of the target image by using the function getimagesize. With this information at hand, you'll have to decide which version of the watermark to use based on the size, aspect ratio and orientation. E.g.
if ( $width > $height ) {$useLandscapeWatermark=true;}
if ( $width > 100 && $width < 400 ) {$watermarkSize=2;}
etc.
Finally, to apply the watermark I recommend you to look at the gd library. This is a powerful library that can do many neat trix, among others merging two images. An alternative is ImageMagic.
Good luck!
I would probably scale the watermark to 20% of the image being watermarked, or 179x39, whichever is smallest.