I have a UIImageView where I have set the frame size to x = 0, y = 0, width = 404, height = 712.
In my project, I need to change the image in UIImageView dynamically.
I am using this code to change the image:
self.imageView.image = [UIImage imageNamed:#"setting-image.png"];
The problem is, when the *.png image size is smaller than the UIImageView frame size, the image stretches. I don't want it to stretch. Is there any way to do that?
You can use
self.imageView.contentMode = UIViewContentModeScaleAspectFit;
Swift 3:
imageView.contentMode = .scaleAspectFit
Or UIViewContentModeCenter / .center, or any of the other modes described in the UIView documentation.
Setting clipsToBounds in combination with UIViewContentModeScaleAspectFit contentMode was what did the trick for me. Hope that helps someone!
imageView.clipsToBounds = YES;
imageView.contentMode = UIViewContentModeScaleAspectFit;
Use the contentMode property. You probably want either UIViewContentModeScaleAspectFit or UIViewContentModeCenter.
Change the UIImage's Mode from 'scale to fill' to 'Center' within the interface builder. Make sure your image is the exact size you need.
You have to set CGSize as your image width and hight so image will not stretch and it will arrange at the middle of imageview.
- (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;
}
Update for Swift 3:
imageView.contentMode = .scaleAspectFit
Change the contentMode, e.g.:
imageView.contentMode = UIViewContentModeScaleAspectFit;
How to use original size of image - without any stretching
Just change the UIImage's Mode from scale to fill to Aspect Fit within the interface builder.
Use this for your UIImageView
imageView.contentMode = UIViewContentModeScaleAspectFill;
You won't get any space and with scale preserved. However, some part of the image will be clipped off.
If you use the following:
imageView.contentMode = UIViewContentModeScaleAspectFit;
There will be some empty space, but scale is preserved.
still stretch when image is bigger than imageivew
swift
let qCodeImage = UIImage(named: "qcode-placeholder.png")!
let qCodeImageView = UIImageView(frame: CGRectMake(0, 0, CGRectGetWidth(cardView.frame)-30, CGRectGetWidth(cardView.frame)-30))
qCodeImageView.image = qCodeImage
qCodeImageView.clipsToBounds = true
qCodeImageView.contentMode = UIViewContentMode.ScaleToFill
qCodeImageView.center = cardView.center
Related
The following code is working fine to make a square image round when placed in cellForRowAtIndexPath.
However, when I move the code to a custom cell, every time the tableview changes, it spreads the circle all the way across the table row into a horizontal blur.
//following crops and rounds image
CGSize itemSize = CGSizeMake(40, 40);
UIGraphicsBeginImageContextWithOptions(itemSize, NO, UIScreen.mainScreen.scale);
CGRect imageRect = CGRectMake(0.0, 0.0, itemSize.width, itemSize.height);
[self.iconView.image drawInRect:imageRect];
self.iconView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.iconView.layer.masksToBounds=YES;
self.iconView.layer.cornerRadius=20.0;
self.iconView.frame = CGRectMake(20, 20, 500, 50);
// [cell.iconView.image drawInRect:imageRect];
// cell.iconView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
In custom cell, I have been placing this code after the following:
self.iconview.image = [UIImage imageNamed:#"test.jpg"];
Does anyone know how I might fix this and still use a custom cell? Thanks in advance for any suggestions.
The issue is what "when I move the code to a custom cell" means - which you do not explain. But the problem is that iconView itself is being resized - it is being made wider. If you don't want that to happen, give it different constraints so that that doesn't happen.
There is no need for you to start the image context and get all the way down into CoreGraphics.
I accomplish this by:
imageView.image = myUIImage
imageView.layer.cornerRadius = imageView.bounds.size.width / 2
There is simple way to make rounded image in custom cell:
imageView.layer.cornerRadius = imageDemo.frame.size.width / 2;
imageView.clipsToBounds = YES;
or follow this link
I am working on application in which the images are coming from server which i have to display in UIImageview which size is of screen size. the problem is some image resolution are very bigger. So, when I use AspectFill it does not appear properly, it is getting shrink and when I use AspectFit it appears in rectangle shape in image view . so is there any way to display image in UIImageView without getting shrink and without getting croped.
Thanks in advance
I think changing contentMode to UIViewContentModeScaleToFill of your imageView should help:
yourImageView.image = yourImage;
yourImageView.contentMode = UIViewContentModeScaleToFill;
CGRect frame = someImageView.frame;
frame.size = yourImage.size;
yourImageView.frame = frame;
Try this
-(UIImage*)resizeImage:(UIImage *)image imageSize:(CGSize)size
{
UIGraphicsBeginImageContext(size);
[image drawInRect:CGRectMake(0,0,size.width,size.height)];
UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
//here is the scaled image which has been changed to the size specified
UIGraphicsEndImageContext();
return newImage;
}
And then use new image for your imageView
You can set image using
UIImage * image=[UIImage imageNamed:#"image.png"];
CGSize size=CGSizeMake(50, 63);//set the width and height
UIImage resizedImage= [self resizeImage:image imageSize:size];
Hope it helps.
try :
UIImageView *yourImageView = [[UIImageView alloc] initWithFrame:CGRectMake(x, y, width, height)];
yourImageView.contentMode = UIViewContentModeRedraw;
yourImageView.image = yourImage;
i hope it helps.
I have a UIImage and I want to adjust what is shown on the device based on a UIImageView.
The UIImage is:
UIImage *image = // a PNG I have
// width = 1200
CGFloat width = image.size.width;
// height = 900
CGFloat height = image.size.height;
And I have an UIImageView
UIImageView *iview = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, 675.0, 900.0)];
How do I get my UIImage into the UIImageView without adjust the aspect ratio? I want the UIImage to be cropped off the edges?
hope this helps
-(UIImage*)crop:(CGRect)frame
{
// Find the scalefactors UIImageView's widht and height / UIImage width and height
CGFloat widthScale = self.bounds.size.width / self.image.size.width;
CGFloat heightScale = self.bounds.size.height / self.image.size.height;
// Calculate the right crop rectangle
frame.origin.x = frame.origin.x * (1 / widthScale);
frame.origin.y = frame.origin.y * (1 / heightScale);
frame.size.width = frame.size.width * (1 / widthScale);
frame.size.height = frame.size.height * (1 / heightScale);
// Create a new UIImage
CGImageRef imageRef = CGImageCreateWithImageInRect(self.image.CGImage, frame);
UIImage *croppedImage = [UIImage imageWithCGImage:imageRef];
CGImageRelease(imageRef);
return croppedImage;//(return value is uiimage)
}
and then add it to uiimageview
If u want to crop off the edges and center the position of ur image then
Set the Imageview properties to AspectFill
myImageView.contentMode = UIViewContentModeScaleAspectFill;
myImageView.clipsToBounds = YES;
Hope this helps
Try setting the contentMode property of your UIImageView to UIViewContentModeScaleAspectFill, which according to the documentation is:
The option to scale the content to fill the size of the view. Some portion of the
content may be clipped to fill the view’s bounds.
You can see the other options in the UIView documentation.
I am trying to enter MPMediaItemArtwork Image into UITableView's cell's ImageView with following code.
MPMediaItemArtwork *artwork = [[[self.arrayOfAlbums objectAtIndex:indexPath.row] representativeItem]valueForProperty:MPMediaItemPropertyArtwork];
UIImage *artworkImage = [artwork imageWithSize: cell.imageView.bounds.size];
if (artworkImage)
{
cell.imageView.image = artworkImage;
}
else
{
cell.imageView.image = [UIImage imageNamed: #"noArtwork.png"];
}
It's okay when i insert Artwork image in UITableView's cell ImageView.
But when my artwork image is too small or big , it's happened like following pic.
Not in completely fill in cell's ImageView.
You see that? I want to set Fill with Stretch like iOS Music App
Here is Build-in App Artwork Image that set Completely fill with Stretch
I want to do like that.
So i used cell.imageView.contentMode = UIViewContentModeScaleAspectFill; however it's not effect.
So how can i do that?
Thanks you for your work.
Try this for calculating a new and fitting image;
Adjust newRect to the rect of your cell.
// scale and center the image
CGSize sourceImageSize = [artworkImage size];
// The rectangle of the new image
CGRect newRect;
newRect = CGRectMake(0, 0, 40, 33);
// Figure out a scaling ratio to make sure we maintain the same aspect ratio
float ratio = MAX(newRect.size.width / sourceImageSize.width, newRect.size.height / sourceImageSize.height);
UIGraphicsBeginImageContextWithOptions(newRect.size, NO, 1.0);
// Center the image in the thumbnail rectangle
CGRect projectRect;
projectRect.size.width = ratio * sourceImageSize.width;
projectRect.size.height = ratio * sourceImageSize.height;
projectRect.origin.x = (newRect.size.width - projectRect.size.width) / 2.0;
projectRect.origin.y = (newRect.size.height - projectRect.size.height) / 2.0;
[sourceImage drawInRect:projectRect];
UIImage *sizedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
cell.imageView.image = sizedImage;
The line
UIImage *artworkImage = [artwork imageWithSize: cell.imageView.bounds.size];
creates an image with the size of the cell. So, it's scaled in this line and the image won't be bigger than the cell and therefore it will not scale afterwards.
I would leave the image at it's original size or at a size 2x the cell size and leave the scaling up to contentMode.
CGSize newSize = CGSizeMake(artwork.bounds.size.width, artwork.bounds.size.height)
UIImage *artworkImage = [artwork imageWithSize: newSize];
I am creating an iPhone app which has image cropping feature. In this, I am getting the photos from the UIImagePickerController and passing it for cropping. There it has a scrollview and the selected image will be added as a subview to the scrollview. And I am using a UIButton for selecting the area for cropping. User can move the button over the imageview and place it anywhere, and when click on CROP button, the area similar to the frame size of the button should be cropped from the imageview.
I used the following code, but it is not returning the actual image.
CGRect clippedRect = CGRectMake(self.scrollView.frame.origin.x+90, self.scrollView.frame.origin.y, self.scrollView.frame.size.width-180, self.scrollView.frame.size.height-220);
CGImageRef imageRef = CGImageCreateWithImageInRect([self.myPhoto CGImage], clippedRect);
UIImage *newImage = [UIImage imageWithCGImage:imageRef];
CGImageRelease(imageRef);
self.imageView.image = newImage;
also used
- (UIImage *)cropImage:(UIImage *)oldImage {
CGSize imageSize = self.cropFrame.frame.size;
UIGraphicsBeginImageContextWithOptions( CGSizeMake( imageSize.width, imageSize.height), NO, 0.);
[oldImage drawAtPoint:CGPointMake( xPosition, yPosition)
blendMode:kCGBlendModeCopy
alpha:1.];
UIImage *croppedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return croppedImage;
}
but the result image is not the exact image as per the button frame. I am getting the image from another area.
Updated code
- (void)loadPhoto{
CGFloat w = self.myPhoto.size.width;
CGFloat h = self.myPhoto.size.height;
CGRect imageViewFrame = CGRectMake(0.0f, 0.0f, roundf(w / 2.0f), roundf(h / 2.0f));
self.scrollView.contentSize = imageViewFrame.size;
UIImageView *iv = [[UIImageView alloc] initWithFrame:imageViewFrame];
iv.contentMode = UIViewContentModeScaleAspectFit;
iv.image = self.myPhoto;
[self.view addSubview:iv];
self.imageView = iv;
[iv release];
}
CGRect crop;//= CGRectMake(10, 10, 360, 360);
crop.origin.x = self.cropFrame.frame.origin.x;
crop.origin.y = self.cropFrame.frame.origin.y;
crop.size.width = roundf(self.cropFrame.frame.size.width * 2.0f); //self.cropFrame.frame.size.width * 2;
crop.size.height = roundf(self.cropFrame.frame.size.height * 2.0f); //self.cropFrame.frame.size.height * 2;
NSLog(#"Rect: %#", NSStringFromCGRect(crop));
self.imageView.image = [self croppedImage:crop];
- (UIImage *)croppedImage:(CGRect)bounds {
CGImageRef imageRef = CGImageCreateWithImageInRect([self.imageView.image CGImage], bounds);
UIImage *croppedImage = [UIImage imageWithCGImage:imageRef scale:1.0 orientation:self.myPhoto.imageOrientation];
CGImageRelease(imageRef);
return croppedImage;
}
Please help to find a solution.
The iOS has a default feature for cropping images.Try this code.
picker.allowsEditing = YES;
and also check this controller for cropping..this is exactly the one you are looking for I think https://github.com/barrettj/BJImageCropper .Hope this helps you..
Since you are using a scrollView that allows the image to be scrolled, you need to adjust your crop rect to the scrollView's position:
float zoomScale = self.scrollView.zoomScale;
int cropX = (self.scrollView.contentOffset.x-imageView.frame.origin.x)/zoomScale;
int cropY = (self.scrollView.contentOffset.y-imageView.frame.origin.y)/zoomScale;
You could use this crop tool that I made. It essentially gives you an interface to allow the user to select the crop area. I think it is in line with that you are looking for.
https://github.com/nicholjs/BFCropInterface
Believing you have solve this problem. Me too had this when tried cropping functionality
Set image.size as the imageView.size & scrollView.contentSize. Below code will give the rect to crop
cropRect.origin = scrollView.contentOffset;
cropRect.size = scrollView.bounds.size;
cropRect.origin.x /= scrollView.zoomScale;
cropRect.origin.y /= scrollView.zoomScale;
cropRect.size.width /= scrollView.zoomScale;
cropRect.size.height /= scrollView.zoomScale;
If planning to show the full image first on visible rect. Setting the imageView.size & scrollView.contentSize to visible view size will give crop image of some other area. Instead try finding the zoom scale by
CGFloat dxWidth = viewCrop.frame.size.width / imageView.image.size.width;
CGFloat dxHeight = viewCrop.frame.size.height / imageView.image.size.height;
CGFloat zoomScale = fmaxf(dWidth, dHeight)
and apply (if by adding subView then after addSubView)
scrollView.minimumZoomScale = zoomScale; // to disable further zoom-out
[scrollView setZoomScale: zoomScale];