Get width of a resized image after UIViewContentModeScaleAspectFit - iphone

I have my UIImageView and I put an image into it that I resize like this:
UIImageView *attachmentImageNew = [[UIImageView alloc] initWithFrame:CGRectMake(5.5, 6.5, 245, 134)];
attachmentImageNew.image = actualImage;
attachmentImageNew.backgroundColor = [UIColor redColor];
attachmentImageNew.contentMode = UIViewContentModeScaleAspectFit;
I tried getting the width of the resized picture in my UIImageView by doing this:
NSLog(#"Size of pic is %f", attachmentImageNew.image.size.width);
But it actually returns me the width of the original picture. Any ideas on how do I get the frame of the picture that I see on screen?
EDIT: Here's how my UIImageView looks, red area is its backgroundColor

I don't know is there more clear solution, but this works:
float widthRatio = imageView.bounds.size.width / imageView.image.size.width;
float heightRatio = imageView.bounds.size.height / imageView.image.size.height;
float scale = MIN(widthRatio, heightRatio);
float imageWidth = scale * imageView.image.size.width;
float imageHeight = scale * imageView.image.size.height;

A solution in Swift:
let currentHeight = imageView.bounds.size.height
let currentWidth = imageView.bounds.size.width
let newWidth = UIScreen.mainScreen().bounds.width
let newHeight = (newWidth * currentHeight) / currentWidth
println(newHeight)

It has the reference of your original image, so always gives the same dimensions as of original image.
To get the dimensions of new image you have to check aspect ratio. I have derived a formula for my need using different images of different size using Preview that how it resizes image according to its aspect ratio.

According to Apple's Documentation for UIViewContentModeScaleAspectFit
It Scales the content (In your case actualImage) to fit the size of the view (In your case attachmentImageNew) by maintaining the
aspect ratio.
That means your image size ( after the scaling ) should be same as your UIImageView.
UPDATE :
One new Suggestion to you if you don't want to use UIViewContentModeScaleAspectFit and if you can fix the size of scaledImage then you can use below code to scale the image for fix newSize and then you can use the width to your code.
CGSize newSize = CGSizeMake(100.0,50.0);
UIGraphicsBeginImageContext( newSize );
[image drawInRect:CGRectMake(0,0,newSize.width,newSize.height)];
UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

in your case:
float yourScaledImageWitdh = attachmentImageNew.frame.size.height * attachmentImageNew.image.size.width / attachmentImageNew.image.size.height
NSLog(#"width of resized pic is %f", yourScaledImageWitdh);
but you should also check, before, the original image proportion vs the imageView proportion, my line of code is good just in case the red area is added horizontally, not in case your original image proportion is wider than the imageView frame proportion

For Swift 2, you can use this code snippet to align an aspectFitted image to the bottom of the screen (sampled from earlier answers to this question -> thanks to you, guys)
let screenSize: CGRect = UIScreen.mainScreen().bounds
let screenWidth = CGFloat(screenSize.width)
let screenHeight = CGFloat(screenSize.height)
imageView.frame = CGRectMake(0, screenHeight - (imageView.image?.size.height)! , screenWidth, (imageView.image?.size.height)!)
let newSize:CGSize = getScaledSizeOfImage(imageView.image!, toSize: self.view.frame.size)
imageView.frame = CGRectMake(0, screenHeight - (newSize.height) , screenWidth, newSize.height)
func getScaledSizeOfImage(image: UIImage, toSize: CGSize) -> CGSize
{
let widthRatio = toSize.width/image.size.width
let heightRatio = toSize.height/image.size.height
let scale = min(widthRatio, heightRatio)
let imageWidth = scale*image.size.width
let imageHeight = scale*image.size.height
return CGSizeMake(imageWidth, imageHeight)
}

Related

Prevent Stretching image from uiimage in iphone sdk

Code snippet
self.newsImage = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,300,130)];
//set placeholder image or cell won't update when image is loaded
self.newsImage.image = [UIImage imageNamed:#"newsDetail.png"];
//load the image
self.newsImage.imageURL = [NSURL URLWithString:imageBig];
[imageBack addSubview:self.newsImage];
I have one image on 40*40 size but image view size 300*130. How to avoid stretching image.
I want center of the UIImageview.
Thanks in Advance !!!!
Just center the content:
self.newsImage.contentMode = UIViewContentModeCenter;
ou have to set CGSize as your image width and hight so image will not stretch and it arrange at the middle.
- (UIImage )imageWithImage:(UIImage )image scaledToFillSize:(CGSize)size
{
CGFloat scale = MAX(size.width/image.size.width, size.height/image.size.height);
CGFloat width = image.size.width * scale;
CGFloat height = image.size.height * scale;
CGRect imageRect = CGRectMake((size.width - width)/2.0f,
(size.height - height)/2.0f,
width,
height);
UIGraphicsBeginImageContextWithOptions(size, NO, 0);
[image drawInRect:imageRect];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}

How to resize AsyncImageView (subclass of UIImageView) while maintaining its Aspect Ratio

I have used the below code from this link:
How to resize an UIImage while maintaining its Aspect Ratio
to resize an image to fixed size (100*100) by maintaing its aspect ratio. I have used AsyncImageView in my application to load the images using url's. You can get the AsyncImageView code from this link: nicklockwood / AsyncImageView
But still those images looks like squeezed. How can I solve this issue?
- (UIImage*) scaleImage:(UIImage*)image toSize:(CGSize)newSize {
CGSize scaledSize = newSize;
float scaleFactor = 1.0;
if( image.size.width > image.size.height ) {
scaleFactor = image.size.width / image.size.height;
scaledSize.width = newSize.width;
scaledSize.height = newSize.height / scaleFactor;
}
else {
scaleFactor = image.size.height / image.size.width;
scaledSize.height = newSize.height;
scaledSize.width = newSize.width / scaleFactor;
}
UIGraphicsBeginImageContextWithOptions( scaledSize, NO, 0.0 );
CGRect scaledImageRect = CGRectMake( 0.0, 0.0, scaledSize.width, scaledSize.height );
[image drawInRect:scaledImageRect];
UIImage* scaledImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return scaledImage;
}
This is how the images are being loaded in my application:
Why not use SDWebImage to get remote image?
Here is the link:https://github.com/rs/SDWebImage

Image is not fit to the frame of UIImageView

I am creating the UIImageView using interface Builder. Its frame size is (320,67).
I want to display the image on the imageView. I am getting the image from the web. The problem is that the image get from web is stretched to display on the imageview...
Here my code
NSData *imageData=[NSData dataWithContentsOfURL:[NSURL URLWithString:#"http://www.isco.com/webproductimages/appBnr/bnr1.jpg"]];
imageView.image = [UIImage imageWithData:imageData];
Can anyone tel me that how to display the image fit to display on imageView????
Either use
imageView.contentMode = UIViewContentModeScaleAspectFill;
or
imageView.contentMode = UIViewContentModeScaleAspectFit;
The first one will fill the frame, possibly cutting off parts of your image. The second one will show the entire image, possibly leaving areas of the frame open.
For Swift :
imageView.contentMode = UIViewContentMode.ScaleAspectFit
For Objective-C :
imageView.contentMode = UIViewContentModeScaleAspectFit
ScaleAspectFit option is use to scale the content to fit the size of the view by maintaining the aspect ratio. Any remaining areas of the view’s bounds is transparent.
Refer Apple docs for details.
I ended up resizing the image after the image was scaled according to it's aspect ratio.
let widthRatio = ImageView.bounds.size.width / (captureImageView.image?.size.width)!
let heightRatio = ImageView.bounds.size.height / (captureImageView.image?.size.height)!
let scale = min(widthRatio, heightRatio)
let imageWidth = scale * (ImageView.image?.size.width)!
let imageHeight = scale * (ImageView.image?.size.height)!
ImageView.frame = CGRect(x: 0, y: 0, width: imageWidth, height: imageHeight)
Try this code.
imView.contentMode = UIViewContentModeScaleAspectFit;

resizing image with appropriate aspect ratio

I am working on new app, in which , i have different sizes of images. I have tried many times with different solution but could not find out the proper aspect ratio for images. I want to display images with a high quality too. There is some images have resolution 20*20 to 3456 * 4608 or it may be so high.
All images will be display without cropping ,but our app screen size is 300 * 370 pxls.
I was follow the following references :
1: Resize UIImage with aspect ratio?
2: UIViewContentModeScaleAspectFit
3: scale Image in an UIButton to AspectFit?
4:Resize UIImage with aspect ratio?
The code that I use for resizing images to an edge 1000px at most is this :
const int maxPhotoWidthOrHeight = 1000;
- (UIImage*)resizeImageWithImage:(UIImage*)image
{
CGFloat oldWidth = image.size.width;
CGFloat oldHeight = image.size.height;
NSLog(#"Old width %f , Old Height : %f ",oldWidth,oldHeight);
if (oldHeight > maxPhotoWidthOrHeight || oldWidth > maxPhotoWidthOrHeight) {//resize if necessary
CGFloat newHeight;
CGFloat newWidth;
if (oldHeight > oldWidth ) {
newHeight = maxPhotoWidthOrHeight;
newWidth = oldWidth * (newHeight/oldHeight);
}
else{
newWidth = maxPhotoWidthOrHeight;
newHeight = oldHeight * (newWidth/oldWidth);
}
CGSize newSize = CGSizeMake(newWidth, newHeight);
UIGraphicsBeginImageContext( newSize );
[image drawInRect:CGRectMake(0,0,newSize.width,newSize.height)];
UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
NSLog(#"New width %f , New Height : %f ",newImage.size.width,newImage.size.height);
return newImage;
}
else{//do not resize because both edges are less than 1000px
return image;
}
}
-- Please add you code example, otherwise its difficult to give any solution to your problem.
A solution found here is also How to scale a UIImageView proportionally?
imageView.contentMode = UIViewContentModeScaleAspectFit;

Resize image to fit proportions

In the design of my app, I have a square space for an image that comes from a remote server. However, occasionally the image is a landscape rectangle instead of a square.
I don't want to crop the image, but instead scale it down far enough to fit inside the square constraints, then fill in the remaining space with some background color, white maybe.
Set the contentMode of your UIImageView to UIViewContentModeScaleAspectFit.
I don't know if this helps or not, but I use this to fit the size of the View to match the image. It takes the provided rect, and trims it to match the image. The returned CGRect can be then be applied to the view. I used this so I could add a shadow to the image (which looks wrong if the view doesn't match the image perfectly).
- (CGRect) resizeCGRect:(CGRect)rect toImage:(UIImage *)image{
CGSize size = rect.size;
CGSize iSize = image.size;
if (iSize.width > iSize.height){
if (iSize.width / iSize.height > size.width / size.height)
size.height = size.width * (iSize.height / iSize.width);
else
size.width = size.height * (iSize.width / iSize.height);
} else {
if (iSize.height / iSize.width > size.height / size.width)
size.width = size.height * (iSize.width / iSize.height);
else
size.height = size.width * (iSize.height / iSize.width);
}
rect.size = size;
return rect;
}
Create a UIImageView with a background color of the color you want. Create your image from your server, set the image in the image view, and then set the contentMode = UIViewContentModeScaleAspectFit
UIImageView *backgroundColorWhite = [[UIImageView alloc] initWithFrame:someObject.frame];
backgroundColorWhite.backgroundColor = [UIColor whiteColor];
UIImage *serverImage = [UIImage imageWithData:serverData];
backgroundColorWhite.contentMode = UIViewContentModeScaleAspectFit;
[backgroundColorWhite setImage:serverImage];