I have UIImageView in which I'm showing 50x100 image.
I want to show only a part of image 50x50 (top part)?
How can I do that?
The very simple way to move big image inside UIImageView as follows.
Let we have the image of size (100, 400) representing 4 states of some picture one below another. We want to show the 2nd picture having offsetY = 100 in square UIImageView of size (100, 100).
The solution is:
UIImageView *iView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
CGRect contentFrame = CGRectMake(0, 0.25, 1, 0.25);
iView.layer.contentsRect = contentFrame;
iView.image = [UIImage imageNamed:#"NAME"];
Here contentFrame is normalized frame relative to real UIImage size.
So, "0" means that we start visible part of image from left border,
"0.25" means that we have vertical offset 100,
"1" means that we want to show full width of the image,
and finally, "0.25" means that we want to show only 1/4 part of image in height.
Thus, in local image coordinates we show the following frame
CGRect visibleAbsoluteFrame = CGRectMake(0*100, 0.25*400, 1*100, 0.25*400)
or CGRectMake(0, 100, 100, 100);
You can crop the image by using CGImageCreateWithImageInRect, which is Quartz primitive working on CGImageRef, so you would have something like:
CGImageRef imageRef = CGImageCreateWithImageInRect(originalImage.CGImage, cropRect);
UIImage* outImage = [UIImage imageWithCGImage:imageRef scale:originalImage.scale orientation:originalImage.imageOrientation]];
CGImageRelease(imageRef);
When calculation cropRect, keep in mind that it should be given in pixels, not in points, i.e.:
float scale = originalImage.scale;
CGRect cropRect = CGRectMake(0, 0,
originalImage.size.width * scale, originalImage.size.height * 0.5 * scale);
where the 0.5 factor accounts for the fact that you want the top half only.
If you do not want to go low-level, you could add your image to a UIView as a background color and use the clipToBounds CALayer property to make the clipping:
myView.backgroundColor = [UIColor colorWithBackgroundPattern:myImage];
myView.layer.clipToBounds = YES;
also, set myView bounds accordingly.
I might have a solution for you. See if this works. In Interface Builder there is an option about Image content fill properties. You can set it to top-left. Follow the image in interface builder -
After this set the size of UIImageView to 50x50 with "clip-subviews" checked...
Related
I'm trying to display a top portion of an UIImage.
I know I can use the following code and display the middle portion. I'm just trying to figure out how to do the same for the top portion:
imageView.contentMode = UIViewContentModeScaleAspectFill;
imageView.clipsToBounds = YES;
The UIImage I get from the server is not necessarily the same size, so I cannot use UIViewContentModeTopLeft. I want a way to scale the image and show the top portion.
Thanks.
You want to display an arbitrary rectangle of your image, so the easiest way to go will to be to put your imageView inside a regular view. You can set the frame of the image view to display the bit you want and set the enclosing view to do the clipping.
e.g. you have a 1000 x 1000 px image and you want to display the rectangle 200,200 to 400,400
UIImageView* imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"SomeImage"]];
imageView.frame = CGRectMake( -200, -200, 1000, 1000);
UIView* enclosingView = [[UIView alloc] initWithFrame:CGRectMake( 0, 0, 200, 200);
enclosingView.clipsToBounds = YES;
[enclosingView addSubview: imageView];
Content mode doesn't matter much in this case, since you're setting the dimension of the image view to match the image.
One way is to call CGImageCreateWithImageInRect on your original image to create a new image with just the top portion.
Something like:
CGImageRef newImageRef = CGImageCreateWithImageInRect( oldImage.CGImage, CGRectMake(0,0,50,50) );
UIImage *newImage = [UIImage imageWithCGImage:newImageRef];
CGImageRelease( newImageRef );
then display newImage rather than oldImage.
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;
I have a large sized image (2048*2048px), this image is shown as 320*320 on iPhone screen. I want to do this:
In my APP, user can open large sized image(e.g. 2048*2048), the image is shown as 320*320 on iPhone screen, and there is rectangle over the image, user can move the rectangle anywhere within image on iPhone screen, e.g. rectangle(100, 100, 300, 200), then I want to clip the original sized image within the rectangle area in scale.
I tried many ways,
UIImageView *originalImageView = [[UIImage View alloc] initWithImage:originalImage]];
CGRect rect = CGRectMake(100, 100, 300, 200);
UIImage *cropImage = [UIImage imageWithCGImage:CGImageCreateWithImageInRect([originalImageView.image CGImage], rect)];
But I got the cropImage is just 300*200 sized image, not scale properly.
How about doing this, it will preserve the original image quality
CGSize bounds = CGSizeMake(320,320) // Considering image is shown in 320*320
CGRect rect = CGRectMake(100, 100, 220, 200); //rectangle area to be cropped
float widthFactor = rect.size.width * (originalImage.size.width/bounds.size.width);
float heightFactor = rect.size.height * (originalImage.size.height/bounds.size.height);
float factorX = rect.origin.x * (originalImage.size.width/bounds.size.width);
float factorY = rect.origin.y * (originalImage.size.height/bounds.size.height);
CGRect factoredRect = CGRectMake(factorX,factorY,widthFactor,heightFactor);
UIImage *cropImage = [UIImage imageWithCGImage:CGImageCreateWithImageInRect([originalImage CGImage], factoredRect)];
And most importantly if you want to crop image that imagePickerController returns, then this can be done by built in function as below,
imagePickerController.allowsEditing = YES;
Firstly resize image with size 320*320 using this method:
+(UIImage *)resizeImage:(UIImage *)image width:(float)width height:(float)height
{
CGSize newSize;
newSize.width = width;
newSize.height = height
UIGraphicsBeginImageContext(newSize);
[image drawInRect:CGRectMake(0,0,newSize.width,newSize.height)];
UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
Now set resized image in imageView
UIImage *resizeImage = [YourControllerName resizeImage:originalImage width:320 height:320];
UIImageView *originalImageView = [[UIImage View alloc] initWithImage:resizeImage]];
You can now crop
CGRect rect = CGRectMake(100, 100, 300, 200);
UIImage *cropImage = [UIImage imageWithCGImage:CGImageCreateWithImageInRect([originalImageView.image CGImage], rect)];
Why not calculate the scale factor (e.g. originalImageWidth/smallImageWidth)?
If the rectangle is (100,100,300,200) in your small image, you should clip your lage image at size (100*factor,100*factor,300*factor,200*factor).
I want to clip an UIImageView if it moves out of given rect.
The image is moving across the screen by setting the frame, but I need to clip it when it moves out of a given fixed rect (say (0,0,650,650)).
If you only want to show the center of the image an a UIImageView set the content mode to "Aspect Fill" via IB. That will center it and crop off anything extra.
Or in code
myImageView.contentMode = UIViewContentModeScaleAspectFill;
or
Subclass UIView and in the drawRect method, adjust the rect and draw out the clipped image using CGContextDrawImage (context, rect, sourceImage.CGImage).
or
Use CALayers. You can adjust the 'contentsRect' of the imageView's layer:
CALayer* imageLayer = imageView.layer;
imageLayer.masksToBounds = YES;
CGRect rect;
if (inPortrait)
rect = CGRectMake(0.0, 0.0, 0.5, 1.0); // half size
else
rect = CGRectMake(0.0, 0.0, 1.0, 1.0); // full size
imageLayer.contentsRect = rect;
Did you try using the property clipsToBounds of UIView and setting it to YES as it says in Reference that
Setting this value to YES causes subviews to be clipped to the bounds of the receiver
UPDATE
See if this SO question helps you
Proper use of UIRectClip to scale a UIImage down to icon size
myImageView.contentMode = UIViewContentModeCenter;
Try this.
I have a UIImageView whose frame, set before the image is loaded, is always too large for the image, so when I try to round the corners, for example, nothing happens.
How can I resize the frame so it's the same size as the underlying image, while ensuring that the center point of the UIImageView does not change?
If you change the bounds of a UIView the center will not change.
CGRect bounds;
bounds.origin = CGPointZero;
bounds.size = newImage.size;
imageView.bounds = bounds;
imageView.image = newImage;
try something along the following lines.. not tested
CGSize imageSize = image.Size;
CGPoint oldCenter = imageView.center;
// now do some calculations to calculate the new frame size
CGRect rect = CGRectMake(0, 0, imageSize.width, imageSize.height);
imageView.frame = rect;
imageView.center = oldCenter;