I want to show image inside the square of fixed dimension of 400 * 400. Hence to maintain the aspect ratio, it is possible that if width is more, then width would be reduced and remaining space as per the aspect ratio would be filled with some background color (I can give color on div). Similarly if the height is more, the height would be adjusted to show it as per aspect ratio and then remaining space would be filled with background.
Could anybody help me how to achieve this? Can this be done with imagemagick?
http://php.net/manual/en/book.imagick.php
Any help would be appreciated.
Use phpthumb.
require_once '/path/to/ThumbLib.inc.php';
$thumb = PhpThumbFactory::create('path/to/image.jpg');
//$thumb->resize(400, 400);
// resize image and make thumbnail by cropping image automatically
$thumb->adaptiveResize(400, 400)->save('/path/to/thumb.jpg'); ;
for more reading goto PHPTHUMB
Try adding width and height
That again you can do this at css :D
If displaying the image with the right size is good enough you don't need to create a scaled version, just scale it in a web page using CSS:
div {
width:400px;
height:400px;
background:url('https://placekitten.com/400/600');
background-repeat:no-repeat;
background-size:contain;
background-position:50% 50%
}
Vary the size of the placekitten image to see the way images are scaled.
Play with an example on jsFiddle: https://jsfiddle.net/Lontevb3/1/
You
Calculate the aspect ratio of the image
Check if one of the image dimensions is longer than your 'frame'
If both are longer, then you pick the largest dimension of the two
Scale the picture so that the longest dimension is the same as that of your frame (400px)
Scale the other dimension so that it is 400*aspect ratio px
How about create a <div> and set the background image?
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.
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.
Php thumb resize image based on provided width and height, I am working on profile image which is: 130x130
While users are uploading image of long heights(rectangle) which leads to strecthed image in its width and when uploading long width image(rectangle) then strecthed, I hope you understand what I mean. Because when anyone uses a large square image it resize to correct 130x130 but longer width and height get strecthed.
I am thinking of having a good suggestion or idea to work around such images, either crop them from top to make them perfect square first.
Thanks,
Najm.
Usually you will take the longer side, scale it up and scale the shorter side by the same percentage. One such snippet is here. You can also prefill the canvas with a smooth background that fits with your overall design.
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.
Does someone knows the image-crop which correctly works with the 'dynamically changed in the CSS image size (I mean width and height)'?
All image-crops works fine if there is original image size (for example size: 400px x 400px) and width:100%;
But if show to user picture with sizes 1500px x 1500px and make it smaller just with css to 100px x 100px (because 1500px - usually to much for screen and looks not pretty) - in this case image-croppers what i saw before issued an error or makes a thumbnail with initial values (top-left corner). I need to pull out pictures from Facebook albums, and usually they are too large.
I know that it is possible to reduce the image before crop, but then deteriorates the quality.
By the way, looks like there is way to make this, because in jCrop preview thumbnail looks fine even if i 'dynamically' change size of image in css. Just preview! Completed cropped image is not correct, as I said there would be the upper left corner of the image.
Okay, the solution was: divide the original image size to "smaller in the css" size.
We obtain the coefficient, before sending it to crop - multiply x1, y1, height, width to this coefficient. profit!
If what you're looking for is a responsive or fluid image cropper (that adapts to the screen) you should try Guillotine, check out the demo and resize the browser's window to see how it adapts.